Limit Number of Characters in a TextArea using jQuery




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

image

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



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

12 Responses to "Limit Number of Characters in a TextArea using jQuery"
  1. Anonymous said...
    August 3, 2009 at 1:50 PM

    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.))

  2. steve said...
    August 19, 2009 at 8:22 AM

    this doesn't stop copying/pasting more than the max characters either.

  3. Suprotim Agarwal said...
    August 19, 2009 at 9:19 AM

    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.

  4. Coldfusion developer said...
    August 23, 2009 at 8:29 AM

    Sweet as!!! Thanks.

  5. Webcliq said...
    August 29, 2009 at 4:15 PM

    Yours was the solution that worked ....
    I wanted to use jQuery solution and everything else including Plugins failed miserably.

  6. Giedrius said...
    October 30, 2009 at 1:09 AM

    if you use >=, you can't select all text, if input text length = limit.

  7. Anonymous said...
    May 10, 2010 at 9:19 PM

    $('.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.

  8. Anonymous said...
    March 2, 2011 at 11:46 PM

    The bug in this script is not acceptable. Sorry, but this was not useful.

  9. Suprotim Agarwal said...
    March 2, 2011 at 11:55 PM

    Which Bug?

  10. Anonymous said...
    May 29, 2011 at 2:23 PM

    Enjoyed the read! Very helpful and informative!

    http://www.marketingusingvideo.com

  11. Tsahi said...
    November 12, 2012 at 4:20 AM

    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() {...});

  12. Swati said...
    November 9, 2013 at 11:08 AM

    Thanks for Limit the no. of charachters in textarea coding. But
    waht about control charachters and same I want in Javvascript


    Swati

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions