inputmode attribute does not affect virtual keyboard on mobile
OS: iOS Ubuntu 22.04 · Device: Mobile Any · Browser: Safari 120.0 · Keyboard: System virtual keyboard
Open case →Scenario
inputmode attribute does not affect virtual keyboard on mobile
The `inputmode` attribute, which should control the type of virtual keyboard shown on mobile devices, does not work on contenteditable regions in iOS Safari. The keyboard type cannot be controlled.
mobile
Scenario ID
scenario-inputmode-behavior
Details
The inputmode attribute, which should control the type of virtual keyboard shown on mobile devices, does not work on contenteditable regions in iOS Safari. The keyboard type cannot be controlled.
References
- MDN: inputmode global attribute - inputmode documentation
- CSS-Tricks: Everything about inputmode - Browser compatibility
- WHATWG HTML Issue #4876: inputmode on contenteditable - Dynamic changes not working
- MDN Browser Compat Data Issue #5085: iOS inputmode flaky - iOS version issues
- Stack Overflow: contenteditable not working on iOS7 - CSS workarounds
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-0059-contenteditable-with-inputmode | iOS Ubuntu 22.04 | Mobile Any | Safari 120.0 | System virtual keyboard | 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: inputmode, mobile, ios
enterkeyhint and inputmode affect Enter key behavior inconsistently
On mobile devices, the combination of enterkeyhint and inputmode attributes may affect Enter key behavior inconsistently on contenteditable elements. The Enter key may insert line breaks when it should perform an action, or vice versa.
1 case
Tags: mobile, keyboard, ios
iPhone keyboard hides text when entering on contenteditable
On iPhone/iPad Safari, when entering text or pressing "return" multiple times in a contenteditable element, the software keyboard appears but hides the text being typed. The page doesn't auto-scroll to keep text visible. Works fine on Android and other browsers.
1 case
Tags: mobile, ios
CSS backdrop-filter may cause rendering issues in contenteditable
When a contenteditable element has CSS backdrop-filter applied, rendering may be affected. Text may appear blurry, selection may not render correctly, and performance may be degraded, especially on mobile devices.
1 case
Tags: mobile, ios
contenteditable focus and caret issues on iOS
On iOS, contenteditable elements may become non-selectable or non-editable. Tapping on the element doesn't display the caret, preventing text input.
0 cases
Tags: keyboard, ios
Broken viewport mechanics when software keyboard is visible (iOS Safari)
On iOS Safari, when the software keyboard becomes visible, viewport calculations become unreliable. `position:fixed` elements break, `height` returns incorrect values, and absolute positioning with `top`/`bottom` fails. This severely affects editors with floating toolbars or positioned elements.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.