JavaScript and jQuery: Limiting and Auto-Update-Counting the Input Value Length

This method is a standard way to limit the tweet characters on Twitter.
We can't have a single tweet with more than 140 characters. If you type more than that, Twitter will give warning and disable the tweet button, with showing the negative count of the exceeding characters.

Actually, I don't know how they did that. I just came up with something to imitate the contenteditable div behavior there. Twitter tweet text window uses div element because they need to highlight the extra characters. We can't do that with input element. Well, we can manipulate things, but it's just not worth it and the result will tend to not-cross-browser.

I'll show you how to do that, the concept, with the auto-updated characters counting. It's using keyup and keydown events.
This (the script) will work on ≥ IE8. I don't know about < IE8.

Let's use form and input instead of a div element. I styled the HTML elements a bit and made one CSS class to emphasize the warning-ish sign.

---

DEMO

JavaScript version

---

jQuery version

---

The elements stacking looks like this :
<div style='text-align:center;font-size:large'> <form class='demodemo'> <input placeholder="≤ 10 characters" size="12" id="textInput" value="" type="text"> <input readonly="true" placeholder="" size="2" value="0" id="inputCount" type="text"> <input type="button" id="buttonInput" value="submit"> </form> </div>

---

Then the CSS :
form.demodemo > input { font-family:consolas,monaco,menlo,courier,monospace; padding:10px 20px; border-radius:6px; text-align:center; } .warning { background:mistyrose; border-color:coral; }

---

Finally, the JavaScript:
/* DO NOT PLACE THESE TWO SNIPPETS ON ONE PLACE - choose one */ /*-----------------------------------------------------------*/ // [#1] JavaScript version var iOne = document.getElementById("textInput"); all_handler = function () { "use strict"; var oOne = document.getElementById("inputCount"), bOne = document.getElementById("buttonInput"), iOneL = iOne.value.length, out; if (iOneL > 10) { out = limit - iOneL; iOne.className = "warning"; oOne.className = "warning"; bOne.disabled = true; } else { out = iOneL; iOne.className = ""; oOne.className = ""; bOne.disabled = false; } oOne.value = out; }; iOne.onclick = all_handler; iOne.onfocus = all_handler; iOne.onkeydown = all_handler; iOne.onkeyup = all_handler; /*-----------------------------------------------------------*/ // [#2] jQuery version var $iOne = $("#textInput"), JQ_all_handler = function () { "use strict"; var $oOne = $("#inputCount"), $bOne = $("#buttonInput"), iOneL = $iOne.val().length, out; if (iOneL > 10) { out = limit - iOneL; $iOne.add($oOne).addClass("warning"); $bOne.prop("disabled", true); } else { out = iOneL; $iOne.add($oOne).removeClass("warning"); $bOne.prop("disabled", false); } $oOne.val(out); }; $iOne.bind("click focus keydown keyup", JQ_all_handler);

---

You can customize the maximum limit by putting different value. Also, if you want, you can reverse this method to have some minimum length of characters. Same concept, but you need to tinker a little the if-else statements.

That's about it. Thanks for joining the fun.