An HTML text input has an attribute called "maxlength", implemented by browsers, which if set blocks user input after a certain number of characters.
An HTML textarea element, on the other hand, does not have this attribute. My goal is to emulate the behavior of maxlength on an HTML textarea. Requirements:
It is understood that server-side validation should check the length again. Here I am focusing on the client-side part only.
My question is: what is the cleanest client-side way of emulating maxlength on an HTML textarea? Ideally, point to a proven, open source, piece of JavaScript that you have used.
The maxlength attribute specifies the maximum length (in characters) of a text area.
The maxlength attribute defines the maximum number of characters (as UTF-16 code units) the user can enter into an <input> or <textarea> . This must be an integer value 0 or higher. If no maxlength is specified, or an invalid value is specified, the input or textarea has no maximum length.
The maxlength attribute on an <input> tag specifies the maximum number of characters that can be entered in the input field. Default is 524,288 characters.
The <textarea> element also accepts several attributes common to form <input> s, such as autocomplete , autofocus , disabled , placeholder , readonly , and required .
Look at the comments on this site, with a count down. I have done it like this before, and it is simple and effective. Stack Overflow makes good use of color too.
Perhaps you don't have enough rep to see the comment box.
It runs a little countdown while you type. At it approaches a threshold, the color changes from yellow to red. All using JavaScript, and I assume the keyup event of the textarea.
EDIT: How about having it done with jQuery?
<script language="javascript" type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready( function () {
setMaxLength();
$("textarea.checkMax").bind("click mouseover keyup change", function(){checkMaxLength(this.id); } )
});
function setMaxLength() {
$("textarea.checkMax").each(function(i){
intMax = $(this).attr("maxlength");
$(this).after("<div><span id='"+this.id+"Counter'>"+intMax+"</span> remaining</div>");
});
}
function checkMaxLength(strID){
intCount = $("#"+strID).val().length;
intMax = $("#"+strID).attr("maxlength");
strID = "#"+strID+"Counter";
$(strID).text(parseInt(intMax) - parseInt(intCount));
if (intCount < (intMax * .8)) {$(strID).css("color", "#006600"); } //Good
if (intCount > (intMax * .8)) { $(strID).css("color", "#FF9933"); } //Warning at 80%
if (intCount > (intMax)) { $(strID).text(0).css("color", "#990000"); } //Over
}
</script>
And the HTML is
<textarea id="text" maxlength="250" class="checkMax"></textarea>
I found a nice script here that stops the user from entering more text after the length of the input string exceeds the MaxLen parameter, it has the undeniable benefit of mostly staying out of the user's face.
My problem with that script was that it also blocked the navigation keys(arrows, home, end) along with backspace and delete, so I modified it slightly, otherwise the user couldn't delete the text he entered if he reached the limit set by MaxLen (which would be kind of hilarious :P).
Javascript:
function imposeMaxLength(Event, Object, MaxLen)
{
return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}
And the HTML that goes with it:
<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">
The user can still get around this limitation by pasting text into the textarea, but that can be easily solved inside imposeMaxLength.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With