A Simple JQuery TextArea MaxLength Function

According to Google, there are about 25,900 TextArea Maximum Length functions available. I searched for a simple function that would work with typing (Key Press) and with Copy and Paste. I also wanted to be able to use it across the site without calling from each textarea. After a few minutes of Googling, I didn’t find anything that fit my requirements, so I put together my own simple function instead.

You need JQuery to make this function work. Download it here, and here are the JQuery basics. Copy the code to anywhere on your Web page, and then paste it below. That it’s it.

   1: <script type="text/javascript">

   2: $("document").ready(function() {

   3:  $('textarea[maxlength]').live('keyup change', function() {

   4:  var str = $(this).val()

   5:  var mx = parseInt($(this).attr('maxlength'))

   6:  if (str.length > mx) {

   7:     $(this).val(str.substr(0, mx))

   8:     return false;

   9:  }})})

  10: </script>

Show/Hide Line Numbers . Full Screen . Plain

Here is a quick Demo (Maximum 50 Characters)

And here are the codes of the Demo above

   1: <script type='text/javascript' src='http://cflove.org/js/jquery-1.4.2.min.js'></script>

   2: <script type="text/javascript">

   3: $("document").ready(function() {

   4:  $('textarea[maxlength]').live('keyup change', function() {

   5:  var str = $(this).val()

   6:  var mx = parseInt($(this).attr('maxlength'))

   7:  if (str.length > mx) {

   8:     $(this).val(str.substr(0, mx))

   9:     return false;

  10:  }

  11:  }

  12:  )

  13: })

  14: </script>

  15: <textarea maxlength="50" style="width:400px; height:50px"></textarea>

Show/Hide Line Numbers . Full Screen . Plain