Scenario

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.

mobile
Scenario ID
scenario-entermode-behavior

Details

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.

References

Scenario flow

Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.

React Flow mini map

Variants

Each row is a concrete case for this scenario, with a dedicated document and playground.

Case OS Device Browser Keyboard Status
ce-0073-contenteditable-with-enter-mode iOS 17.0 iPhone Any Safari 17.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: mobile, ios, safari

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: enterkeyhint, mobile

enterkeyhint attribute does not work on contenteditable

The enterkeyhint attribute, which controls the label on the Enter key on mobile keyboards, does not work on contenteditable elements. The Enter key label remains the default regardless of the attribute value.

1 case

Comments & Discussion

Have questions, suggestions, or want to share your experience? Join the discussion below.