The Current State of HTML5 Forms

The maxlength Attribute

<input type="text" maxlength="10">
<textarea maxlength="20"></textarea>

Live Demo




 
Firefox
3.6
Firefox
4+
Safari
5+
Safari Mobile
4+
Chrome
6+
Opera
11+
IE
9
IE
10+
Android
2.3
Input Supported Supported Supported Supported Supported Supported Supported Supported Supported
Textarea No support Supported Supported Supported Supported Supported Not supported Supported Supported

Supported Browser Screenshots

Opera 11.10 Mac

The Low Down

The maxlength attribute limits the number of characters that an <input> or <textarea> can accept. The maxlength attribute on textarea is new in HTML5.

  • Works for GUI-less inputs like text, email, url, search, tel and password.
  • Upon data entry, browsers will not permit the user to enter more than the characters defined by the value of the maxlength attribute: cutting off the text as-you-type and truncating pasted text. This can lead to bad user experience.
  • maxlength does not limit placeholder length.
  • If a preset value is included with a value that has more characters than the allowed length, a validation error will not be thrown. However, if that preset value is edited, yet is still longer than the allowed length, the element will become invalid, matching the :invalid pseudoclass selector, and will be prevented from being submitted in both Opera and IE10+, which both display the tooLong validity error message.
  • IE 9 reported support on both inputs and textareas but only works on inputs.