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).
About the Author
You 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
PHP: Convert Line Breaks from Textarea in HTML Line Breaks
Tip | 0 Comments
TinyMCE: Remove TinyMCE Editor from Textarea
Question | 1 Answer
PHP: Read Textarea Line by Line as Array
Question | 3 Answers
HTML: Preassign HTML Form with Data
Tutorial | 0 Comments
More than 2 Letters or 4 Digits on German Number Plate?
Question | 1 Answer
XLS and XLSX: Maximum Number of Columns and Rows
Info | 2 Comments
WordCreator: Words with too many characters are created
Question | 1 Answer
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.
A small suggestion from me:
Alternatively, you can also use the line
instead of the line:
It is both working.
2013-03-11 at 16:51
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
Apparently, jQuery seems to strip "genuine" linefeeds from the value returned by .val().
Adding this workaround to your jQuery code works for me:
I have created a jsFiddle for demonstration.
2013-05-23 at 19:05