enterkeyhint #

::: section-content The enterkeyhint global attribute is an enumerated attribute defining what action label (or icon) to present for the enter key on virtual keyboards. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: enterkeyhint #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

<p contenteditable enterkeyhint="go">https://example.org</p>

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Description #

::: section-content Form controls (such as <textarea> or <input> elements) or elements using contenteditable can specify an inputmode attribute to control what kind of virtual keyboard will be used. To further improve the user's experience, the enter key can be customized specifically by providing an enterkeyhint attribute indicating how the enter key should be labeled (or which icon should be shown). The enter key usually represents what the user should do next; typical actions are: sending text, inserting a new line, or searching.

If no enterkeyhint attribute is provided, the user agent might use contextual information from the inputmode, type, or pattern attributes to display a suitable enter key label (or icon). :::

Values #

::: section-content The enterkeyhint attribute is an enumerated attribute and only accepts the following values:

Value	Description	Example label (depends on user agent and user language)
`enterkeyhint="enter"`	Typically inserting a new line.	`↵`
`enterkeyhint="done"`	Typically meaning there is nothing more to input and the input method editor (IME) will be closed.	`Done`
`enterkeyhint="go"`	Typically meaning to take the user to the target of the text they typed.	`Open`
`enterkeyhint="next"`	Typically taking the user to the next field that will accept text.	`Next`
`enterkeyhint="previous"`	Typically taking the user to the previous field that will accept text.	`Previous`
`enterkeyhint="search"`	Typically taking the user to the results of searching for the text they have typed.	`Search`
`enterkeyhint="send"`	Typically delivering the text to its target.	`Send`

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# attr-enterkeyhint]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

               Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

enterkeyhint 77 79 94 No 66 13.1 77 77 94 57 13.4 12.0 :::