pattern attribute does not validate contenteditable content
OS: Windows 11 · Device: Desktop or Laptop Any · Browser: Firefox 120.0 · Keyboard: US
Open case →Scenario
pattern attribute does not validate contenteditable content
The `pattern` attribute, which allows regex-based validation on form inputs, does not work on contenteditable regions. Content cannot be validated against a pattern.
other
Scenario ID
scenario-pattern-validation
Details
The pattern attribute, which allows regex-based validation on form inputs, does not work on contenteditable regions. Content cannot be validated against a pattern.
References
- MDN: pattern attribute - pattern attribute documentation
- MDN: HTMLElement.contentEditable - contentEditable property
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-0064-contenteditable-with-pattern | Windows 11 | Desktop or Laptop Any | Firefox 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: firefox
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: firefox
Caret position jumps unexpectedly after pasting content
After pasting content into a contenteditable region, the caret position does not end up at the expected location, sometimes jumping to the beginning of the pasted content or to an unexpected position.
1 case
Tags: firefox
contenteditable inheritance behavior is inconsistent
When a parent element has contenteditable="true" and a child element has contenteditable="false", the inheritance behavior is inconsistent across browsers. Some browsers allow editing in the child, while others correctly prevent it. The behavior may also differ when the child has contenteditable="inherit" or no contenteditable attribute.
1 case
Tags: firefox
contenteditable in table cells causes layout issues
When a contenteditable region is inside a table cell (`<td>`), editing the content may cause layout issues in Firefox. The table may resize unexpectedly or the cell may overflow.
1 case
Tags: firefox
CSS mix-blend-mode may affect contenteditable text rendering
When a contenteditable element has CSS mix-blend-mode applied, text rendering may be affected. Text may appear with incorrect colors, selection may not be visible, and caret may not render correctly.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.