Jump to content
StevenOliver

alert message every length increase of 5

Recommended Posts

Question:
How do I get an alert after every input (keypress or paste) of 5 or more characters are pasted into a textarea?

// This doesn't work:
function alert_every_five() {
var incrmt = 5;
if ( document.getElementById("my_input").value.length > incrmt ) {
alert("you input another five-or-more characters");
incrmt += 5;
}
}

Example:
Visitor types the words "Good day! How are you today?"

Desired effect while typing:
As soon as visitor types the "d" in "day," the alert should trigger.
No more alerts should trigger until each 5 character increment (i.e. as soon as they type the "H" in "How," the "r" in "are" etc. etc.).

Desired effect while pasting:
Alerts should trigger only if "5-or-more" characters are input:
If visitor pastes "good day! How are you today?" : just one alert.
If visitor pastes "good day" and then "How" and then "are you today?" : alert after "good day" and no more alerts until "are you today" is pasted.

Thank you!

Share this post


Link to post
Share on other sites

Every time this function runs, incrmt - which you really should spell out normally - will be set to 5. Every time.

The variable needs to come from outside the function so there's only one copy of it floating around.

Share this post


Link to post
Share on other sites
Posted (edited)

This is the best I can do. This appears to work whether the visitor hand-types their input, or pastes their input:

<script>

var character_count = 5;
var multiples = 1;

function show_alert(n) {
if (n > (character_count * multiples)) {
alert(" At least 5 more characters were entered. ");
multiples++;
}
}

</script>

<textarea onInput="show_alert(this.value.length);" > </textarea>

Your thoughts please?

Edited by StevenOliver

Share this post


Link to post
Share on other sites

1. It's bad practice to create global variables.
2. It's also bad practice to write inline event handlers.
3. Your message says "at least 5" but your code checks for more than five.

<textarea id="something"></textarea>

<script>
(function() {
	var character_count = 5;
	var multiples = 1;
  	var textarea = document.getElementById("something");
  
	textarea.addEventListener("input", function() {
		if (textarea.value.length >= (character_count * multiples)) {
			alert("At least 5 more characters were entered.");
			multiples++;
		}
	});
})();
</script>

1. Wrapping all your stuff in an anonymous function that executes immediately will keep the variables safe.
2. Use addEventListener to attach events dynamically.

Share this post


Link to post
Share on other sites

Requinix, thank you! When you say "inline event handlers," do you mean "onClick" and "onInput?" With my simple script, what are some things that could go wrong?

Share this post


Link to post
Share on other sites
28 minutes ago, StevenOliver said:

When you say "inline event handlers," do you mean "onClick" and "onInput?"

And all the other on*s, yes.

The reasons to avoid them are too complicated and lengthy for me to want to go into now (Google is your friend), but the highlights are:
1. It's a good thing to keep HTML and Javascript separate from each other
2. Using onclick attributes means you can only have the one click event handler
3. Managing event handlers that way is annoying when you start getting into larger applications

Establish the right habits now and you won't have to reconsider what you're doing later.

Share this post


Link to post
Share on other sites
3 hours ago, StevenOliver said:

Requinix, thank you! When you say "inline event handlers," do you mean "onClick" and "onInput?" With my simple script, what are some things that could go wrong?

In case you were wondering, the example provided is the implementation of an IFFE (I pronounce it IFFY but maybe that's just me).  A very useful mechanic and design pattern.  Once you grok it, you will find it very useful.  

To quote the page I linked:

Quote

IIFEs are very useful because they don’t pollute the global object, and they are a simple way to isolate variables declarations.

You may find yourself looking at all the global variables and functions you made to and finding this technique a great way of cutting down on those.  

Share this post


Link to post
Share on other sites

Thank you all! This will work in Netscape Navigator, right? Javascript sure has come a long way since the 90's.

Share this post


Link to post
Share on other sites
6 minutes ago, StevenOliver said:

Thank you all! This will work in Netscape Navigator, right? Javascript sure has come a long way since the 90's.

Yes, it's a language construct that is part of javascript itself.  

One essential resource is Can I use?  Very nice way of checking if the techniques 

Share this post


Link to post
Share on other sites

gizmola, thank you for mentioning that "Can I use" site. That should definitely be useful for me. Another site I use is that one that displays what my website looks like in different browsers. I forgot the name of it, but I like to be cross-platform. Nothing bugs me more than websites that say "You must use xyz to view this site properly."

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.