The MaxLength property works for a textbox but not for a TextArea. I recently bumped into a JavaScript solution which demoed how to Limit the Number of Characters in a Textarea or Text Field. I thought of replicating the functionality in jQuery and here’s what I came up with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Limit Number of Characters in a TextArea</title>
<script type='text/javascript'
src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#ta').keyup(function() {
var len = this.value.length;
if (len >= 150) {
this.value = this.value.substring(0, 150);
}
$('#charLeft').text(150 - len);
});
});
</script>
</head>
<body>
<textarea id="ta" cols="20" rows="8"></textarea><br/>
(Maximum characters: 150)<br/>
<span id="charLeft"> </span> Characters left
</body>
</html>
OUTPUT
Note: Although I have shown you how to disallow additional characters, this can be confusing to novice users. So instead of disallowing additional characters, let your users know that they crossed the TextBox limit and then allow them to edit it before submitting.
Check a Live Demo here
Giving me +1 tells me you liked this article! Thanks in advance
Did you like this post?
|
|
||
|
|
|
Save on Delicious |
|
subscribe via rss |
|
subscribe via e-mail |
|
print this post |
|
follow me on twitter |
About The Author
comments
11 Responses to "Limit Number of Characters in a TextArea using jQuery"It has some bugs :
1.) On Firefox, it takes me to the top of the textarea if the limit is exceeded.
2.) On Firefox, it allows to me to exceed the limit on certain occasions (I was able to get it to display negative number of characters left (-1, -2, etc.))
this doesn't stop copying/pasting more than the max characters either.
Anonymous: In FireFox, although the negative number is displayed for a moment while typing quickly, however it does not accept more than 150 characters. The extra string is trucated
Steve: I have tested this in IE7, 8, Firefox 3 and Chrome and it truncates the extra characters, even when it is copied and pasted.
Sweet as!!! Thanks.
Yours was the solution that worked ....
I wanted to use jQuery solution and everything else including Plugins failed miserably.
if you use >=, you can't select all text, if input text length = limit.
$('.desc').keyup(function() {
var len = this.value.length;
if (len >= 200) {
this.value = this.value.substring(0, 200);
}
if (len >= 200) {
$('.charleft').text('0');
}
else {
$('.charleft').text(200 - len);
}
});
Makes it less buggy in firefox.
The bug in this script is not acceptable. Sorry, but this was not useful.
Which Bug?
Enjoyed the read! Very helpful and informative!
http://www.marketingusingvideo.com
onkeyup doesn't intercept paste from the context menu. you should add the paste and/or input events, i.e. use .bind("keyup paste input", function() {...});
Post a Comment