Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Max length for HTML <textarea>

How to restrict the maximum number of characters that can be entered into an HTML <textarea>? I'm looking for a cross-browser solution.

like image 303
cmsherratt Avatar asked Sep 04 '08 11:09

cmsherratt


People also ask

Is there any limit in HTML textarea?

HTML <Textarea>maxlength attribute number: It contains single value number which allows the maximum number of character in Textarea element. Its default value is 524288.

How do you give max length in HTML?

The maxlength attribute defines the maximum number of characters (as UTF-16 code units) the user can enter into an <input> or <textarea> . This must be an integer value 0 or higher. If no maxlength is specified, or an invalid value is specified, the input or textarea has no maximum length.

How set textarea size in HTML?

We can set the size for the text area by using rows and columns. rows*columns will be the size of the text area. For columns, we have to use the cols keyword.


2 Answers

The TEXTAREA tag does not have a MAXLENGTH attribute the way that an INPUT tag does, at least not in most standard browsers. A very simple and effective way to limit the number of characters that can be typed into a TEXTAREA tag is:

<textarea onKeyPress="return ( this.value.length < 50 );"></textarea>

Note: onKeyPress, is going to prevent any button press, any button including the backspace key.

This works because the Boolean expression compares the field's length before the new character is added to the maximum length you want (50 in this example, use your own here), and returns true if there is room for one more, false if not. Returning false from most events cancels the default action. So if the current length is already 50 (or more), the handler returns false, the KeyPress action is cancelled, and the character is not added.

One fly in the ointment is the possibility of pasting into a TEXTAREA, which does not cause the KeyPress event to fire, circumventing this check. Internet Explorer 5+ contains an onPaste event whose handler can contain the check. However, note that you must also take into account how many characters are waiting in the clipboard to know if the total is going to take you over the limit or not. Fortunately, IE also contains a clipboard object from the window object.1 Thus:

<textarea onKeyPress="return ( this.value.length < 50 );"
onPaste="return (( this.value.length +
window.clipboardData.getData('Text').length) < 50 );"></textarea>

Again, the onPaste event and clipboardData object are IE 5+ only. For a cross-browser solution, you will just have to use an OnChange or OnBlur handler to check the length, and handle it however you want (truncate the value silently, notify the user, etc.). Unfortunately, this doesn't catch the error as it's happening, only when the user attempts to leave the field, which is not quite as friendly.

Source

Also, there is another way here, including a finished script you could include in your page:

http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html

like image 121
Espo Avatar answered Oct 11 '22 06:10

Espo


HTML5 now allows maxlength attribute on <textarea>.

It is supported by all browsers except IE <= 9 and iOS Safari 8.4. See support table on caniuse.com.

like image 6
indusBull Avatar answered Oct 11 '22 06:10

indusBull