22 Votes

Textarea Maxlength: Limit Maximum Number of Characters in Textarea

Tutorial by Stefan Trost | 2013-03-10 at 15:25

Unfortunately, the HTML specification allows the maxlength attribute only for text input boxes but not for text fields or text areas. If we also want to limit the maximum number of characters that can be entered by a user in a textarea, we need to use JavaScript.

Today, I want to show you an example for jQuery, which is simultaneously indicating the number of characters left.

HTML

In HTML, its is enough to use the maxlength-attribute as usual:

<div>
   <textarea name="text" maxlength="100"></textarea>
   <p>Remaining characters: <span class="charleft">100</span></p>
</div>

In addition, we want to display the remaining characters below the text box. For this, we are providing a region with the class "charleft, so that we can easily respond to this area later to display the number of characters left.

jQuery

The heart is our jQuery code that makes sure to limit the number of characters and to carry out the display.

$(document).ready(function() {
   $('textarea[maxlength]').keyup(function(){
      var max = parseInt($(this).attr('maxlength'));

      if($(this).val().length > max){
         $(this).val($(this).val().substr(0, max));
      }
	 
      $(this).parent().find('.charleft').html(max - $(this).val().length);
   });	
});

The action should be carried out each time, the user is going of a key (keyup). First, we catch the value of the maximum number of characters allowed from the maxlength-attribute in order to store this value in the variable "max". After that, we look up whether the length of the characters written in the text box exceeds the maximum number of characters allowed. If so, we cut off the extra characters. Finally, we are searching for the "charleft" section in order to set it to the number of remaining  characters (maximum number of characters - the number of characters in the field).

ReplyPositiveNegativeDateVotes
Avatar
-13 Votes

A small suggestion from me:

Alternatively, you can also use the line

$('textarea[maxlength]').keyup(function(){

instead of the line:

$('textarea[maxlength]').bind('input propertychange',
function(){ 

It is both working.
2013-03-11 at 16:51

ReplyPositive Negative
Avatar
-33 Votes

A line break in the value is canonicalized by the browser to CR LF (carriage return, linefeed, i.e. two control characters).

The counter only counts the linebreak as one character, thus not displaying properly how many character are left when the input contains line breaks.
2013-05-23 at 18:40

ReplyPositive Negative
Avatar
13 Votes

Apparently, jQuery seems to strip "genuine" linefeeds from the value returned by .val().

Adding this workaround to your jQuery code works for me:

$.valHooks.textarea = { get: function(e) {
  return e.value.replace(/\r?\n/g, "\r\n");
}};

I have created a jsFiddle for demonstration.
2013-05-23 at 19:05

Positive Negative
Reply
Reply

About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile

 

Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.