maxlength attribute is not supported on contenteditable
OS: Windows 11 · Device: Desktop or Laptop Any · Browser: Chrome 120.0 · Keyboard: US
Open case →Scenario
maxlength attribute is not supported on contenteditable
The `maxlength` attribute, which works on `<input>` and `<textarea>` elements, is not supported on contenteditable regions. There is no built-in way to limit the amount of content that can be entered.
other
Scenario ID
scenario-maxlength-behavior
Details
The maxlength attribute, which works on <input> and <textarea> elements, is not supported on contenteditable regions. There is no built-in way to limit the amount of content that can be entered.
References
- MDN: maxlength attribute - maxlength attribute documentation
- NPM: maxlength-contenteditable - Library for contenteditable character limits
Scenario flow
Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.
Variants
Each row is a concrete case for this scenario, with a dedicated document and playground.
| Case | OS | Device | Browser | Keyboard | Status |
|---|---|---|---|---|---|
| ce-0057-contenteditable-with-maxlength | Windows 11 | Desktop or Laptop Any | Chrome 120.0 | US | draft |
Cases
Open a case to see the detailed description and its dedicated playground.
Related Scenarios
Other scenarios that share similar tags or category.
Tags: validation, chrome
required attribute is not supported for validation
The required attribute, which works on form inputs to indicate mandatory fields, is not supported on contenteditable regions. There is no built-in way to mark a contenteditable as required for form validation.
1 case
Tags: chrome
autofocus attribute does not work on contenteditable
The autofocus attribute, which automatically focuses form inputs on page load, does not work on contenteditable elements. There is no built-in way to automatically focus a contenteditable region when a page loads.
1 case
Tags: chrome
Text caret is invisible on position:relative elements
When editing content inside an element with `position:relative`, the text caret (cursor) is completely invisible. Text can be typed and appears in the editor, but there's no visual feedback of where the insertion point is located.
2 cases
Tags: chrome
Typing certain characters makes cursor jump on Chrome Mobile
On Chrome Mobile for Android, typing certain punctuation characters (commas, colons, semicolons, quotes, etc.) in the middle of a word causes the cursor to jump to the end of the word instead of staying at the insertion point.
2 cases
Tags: chrome
Caret jumps to end when deleting character next to non-editable element
When deleting the last character before a non-editable "pill" or tag element (contenteditable="false") in a contenteditable div in Chrome, the caret (cursor) jumps to the end of the entire contenteditable div instead of staying adjacent to the remaining content.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.