maxlength: Browser Support, Usage, Known Issues

What is maxlength?

The maxlength attribute is a standard HTML form attribute defined by the WHATWG HTML living specification. It limits the length of text a user can enter into an input element (in text, search, tel, url, email, or password mode) or a textarea. The browser stops further typing once the limit is reached.

Which browsers does maxlength support?

maxlength is a Baseline Widely available feature with around 97 percent global support, but a handful of older engines and edge browsers ship only partial support that you still need to test for.

How does the maxlength attribute work?

maxlength tells the browser to stop accepting user keystrokes once the field value reaches the declared length, measured in UTF-16 code units. It runs as part of the HTML constraint validation API, and the browser exposes a tooLong flag on the field's ValidityState whenever the value somehow exceeds the cap.

• Allowed values: A non-negative integer (0 or higher). Any other value is treated as no limit at all.
• UTF-16 counting: An emoji built from a surrogate pair counts as two units, so the visible character count and the maxlength count can drift apart.
• User input only: Constraint validation runs when the user types or pastes. Setting element.value from JavaScript bypasses the cap entirely.
• Eligible elements: Only input in text, search, tel, url, email, or password mode, plus the textarea element. Other input types ignore the attribute.

Use feature detection to confirm the platform supports the maxLength DOM property and read ValidityState.tooLong to react when a user crosses the bound.

// Feature-detect maxlength on the platform
const probe = document.createElement('input');
const supportsMaxLength = 'maxLength' in probe;
console.log(supportsMaxLength ? 'maxlength supported' : 'maxlength missing');

// Watch a real field and react when the user hits the cap
const username = document.querySelector('#username');
username.addEventListener('input', () => {
    if (username.validity.tooLong) {
        console.log('User typed past the maxlength bound');
    }
});

Why is maxlength not working?

The attribute itself is supported across every modern engine, so when maxlength looks broken the cause is almost always one of four mistakes in the markup or framework wiring above it.

• type="number" on the input: Numeric inputs ignore maxlength outright. Use the min and max attributes for range bounds, or switch to type="text" with a pattern attribute to bound character count.
• Lowercase maxlength in React: JSX requires camelCase, so write maxLength={50}. Lowercase maxlength is treated as an unknown attribute and dropped silently from the rendered DOM.
• Programmatic value assignment: Setting field.value from a script bypasses constraint validation. Trim the value yourself before assigning, or dispatch an InputEvent if you need the browser to enforce the cap.
• Custom contenteditable widgets: Rich text editors built on contenteditable do not honor maxlength because the attribute is only valid on input and textarea. Track length manually with an input event listener.

In my experience, the React camelCase trap is the single most common production bug we see for this attribute, and it ships silently because lint rules rarely flag a missing maxLength.

What are the known issues with maxlength?

maxlength has a wide support footprint, but the edge cases break in browser-specific ways that only show up on real devices.

• Surrogate pair drift: Emoji and astral-plane characters count as two UTF-16 units. A field labeled "up to 10 characters" cuts off after five flag emoji, which surprises users.
• Android paste regressions: Some Samsung Internet and stock Android Browser builds let users paste past the cap, then truncate on next keystroke. Always test paste flows on a real Android device.
• iOS autocomplete bypass: iOS Safari occasionally accepts an autofill or QuickType suggestion that exceeds the maxlength, which leaves validity.tooLong true on submit.
• Opera Mini partial enforcement: Opera Mini renders pages through a server-side proxy, so maxlength is only enforced after the form posts back, never live as the user types.
• Form submission semantics: A maxlength violation does not block form submission unless you also call form.checkValidity. The browser leaves the responsibility to the page.

Citations

All maxlength version numbers, behavior notes, and platform claims in this guide come from these primary sources:

• MDN Web Docs, HTML attribute maxlength: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/maxlength
• MDN Web Docs, HTMLInputElement.maxLength: developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/maxLength
• MDN Web Docs, HTMLTextAreaElement.maxLength: developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/maxLength
• MDN Web Docs, ValidityState.tooLong: developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooLong
• MDN Web Docs, Constraint validation guide: developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation
• WHATWG HTML Standard, input maxlength attribute: html.spec.whatwg.org/multipage/input.html#attr-input-maxlength
• WHATWG HTML Standard, textarea maxlength attribute: html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-maxlength
• WHATWG HTML Standard, constraint validation: html.spec.whatwg.org/multipage/form-control-infrastructure.html#constraint-validation
• Wikipedia, HTML form: en.wikipedia.org/wiki/Form_(HTML)