{"id":355902,"date":"2021-11-05T07:43:25","date_gmt":"2021-11-05T14:43:25","guid":{"rendered":"https:\/\/css-tricks.com\/?p=355902"},"modified":"2021-11-05T07:43:28","modified_gmt":"2021-11-05T14:43:28","slug":"enterkeyhint","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/enterkeyhint\/","title":{"rendered":"enterkeyhint"},"content":{"rendered":"\n<p>I only just recently learned the <code>enterkeyhint<\/code> attribute on form inputs was a thing! It seems like kind of a big deal to me, as crafting HTML form markup is a decent slice of a front-end developer&#8217;s life, and this attribute could (<em>should?<\/em>) be used on nearly every input. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>The <code>enterkeyhint<\/code> attribute changes the action key on a mobile keyboard to change the text\/affordance.<\/strong> Stefan Judis spells it out nicely in this tweet from 2020:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Safari now supports `enterkeyhint`. \ud83d\udc4f <br><br>I always like it when the enter key gives me more context. \ud83d\udc47<br><br>\ud83d\udd17 Spec: <a href=\"https:\/\/t.co\/IOQkUsjB6f\">https:\/\/t.co\/IOQkUsjB6f<\/a><a href=\"https:\/\/twitter.com\/hashtag\/devsheets?src=hash&amp;ref_src=twsrc%5Etfw\" rel=\"noopener\">#devsheets<\/a> <a href=\"https:\/\/t.co\/7HHX77Jow7\">pic.twitter.com\/7HHX77Jow7<\/a><\/p>&mdash; Stefan Judis (@stefanjudis) <a href=\"https:\/\/twitter.com\/stefanjudis\/status\/1249958064041734144?ref_src=twsrc%5Etfw\" rel=\"noopener\">April 14, 2020<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>So, say I have a form like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;form>\n  &lt;label>\n    Name:\n    &lt;input type=\"text\" name=\"name\">\n  &lt;\/label>\n  &lt;label>\n    Favorite songs:\n    &lt;textarea name=\"songs\">&lt;\/textarea>\n  &lt;\/label>\n  &lt;button>Save&lt;\/button>\n&lt;\/form><\/code><\/pre>\n\n\n\n<p>The user experience there suggests form that &#8220;Saves&#8221; but by default on the iPhone in my hand, the blue button in the keyboard says&#8230; &#8220;go.&#8221;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/IMG_0411.png?resize=214%2C340&#038;ssl=1\" alt=\"iPhone screenshot of a simple form on a plain webpage and the phone's touch keyboard displayed. The primary button where the Enter key normally is located is replaced by go.\" class=\"wp-image-356036\" width=\"214\" height=\"340\" data-recalc-dims=\"1\" \/><figcaption>The default action button on the mobile keyboard of iOS is &#8220;go&#8221;<\/figcaption><\/figure><\/div>\n\n\n\n<p>That&#8217;s not a disaster or anything, but now I&#8217;ve got some options for that button. I&#8217;ll steal this <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/interaction.html#input-modalities\" rel=\"noopener\">from the spec<\/a>, which refers to them as &#8220;input modalities&#8221;:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Keyword<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td><dfn><code>enter<\/code><\/dfn><\/td><td>The user agent should present a cue for the operation &#8216;enter&#8217;, typically inserting a new line.<\/td><\/tr><tr><td><dfn><code>done<\/code><\/dfn><\/td><td>The user agent should present a cue for the operation &#8216;done&#8217;, typically meaning there is nothing more to input and the input method editor (IME) will be closed.<\/td><\/tr><tr><td><dfn><code>go<\/code><\/dfn><\/td><td>The user agent should present a cue for the operation &#8216;go&#8217;, typically meaning to take the user to the target of the text they typed.<\/td><\/tr><tr><td><dfn><code>next<\/code><\/dfn><\/td><td>The user agent should present a cue for the operation &#8216;next&#8217;, typically taking the user to the next field that will accept text.<\/td><\/tr><tr><td><dfn><code>previous<\/code><\/dfn><\/td><td>The user agent should present a cue for the operation &#8216;previous&#8217;, typically taking the user to the previous field that will accept text.<\/td><\/tr><tr><td><dfn><code>search<\/code><\/dfn><\/td><td>The user agent should present a cue for the operation &#8216;search&#8217;, typically taking the user to the results of searching for the text they have typed.<\/td><\/tr><tr><td><dfn><code>send<\/code><\/dfn><\/td><td>The user agent should present a cue for the operation &#8216;send&#8217;, typically delivering the text to its target.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>As a serious web professional, I also tried <code>enterkeykint=\"poop\"<\/code> but, alas, it was not respected by the browser. Note that on Android the action button doesn&#8217;t just always turn into text, but uses icons. So for the value <code>send<\/code>, you get a little paper airplane icon rather than the &#8220;send&#8221; label. So, yeah, obviously <code>poop<\/code> should have turned into &#x1f4a9;.<\/p>\n\n\n\n<p>For the little form example above&#8230; the value <code>enter<\/code> or <code>done<\/code> somehow feels better to me than <code>go<\/code>. If I want to change that, I&#8217;d add the attribute for all interactive form elements:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;form>\n  &lt;label>\n    Name:\n    &lt;input type=\"text\" name=\"name\" enterkeyhint=\"done\">\n  &lt;\/label>\n  &lt;label>\n    Favorite songs:\n    &lt;textarea name=\"songs\" enterkeyhint=\"done\">&lt;\/textarea>\n  &lt;\/label>\n  &lt;button enterkeyhint=\"done\">Save&lt;\/button>\n&lt;\/form><\/code><\/pre>\n\n\n\n<p>This attribute goes directly on the form inputs, so it feels a bit repetitive writing it for each and every input, especially in longer forms. But it does give you an opportunity to change it depending on what input is focused. <\/p>\n\n\n\n<p>I notice that <code>save<\/code> isn&#8217;t a valid option. That seems weird as it feels like what a lot of forms would offer. Perhaps the web platform doesn&#8217;t want to offer something that tells users something they can&#8217;t possibly enforce? I&#8217;m not sure that&#8217;s the case, though, because if you put in <code>next<\/code> or <code>previous<\/code> that <strong>doesn&#8217;t change the behavior at all\u2014you&#8217;d have to code that yourself<\/strong> if what you want to do is move focus to the next or previous inputs. By default, the action button just submits the form as it normally would.<\/p>\n\n\n\n<p>I came across all this as Stefan more recently <a href=\"https:\/\/twitter.com\/stefanjudis\/status\/1445784966579646465?s=12\" rel=\"noopener\">tweeted<\/a> that Firefox is <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1648332\" rel=\"noopener\">supporting<\/a> it now, offering a largely complete set of support for this feature. <strong>This feature is only relevant to mobile browsers<\/strong> (or, I suppose, browsers that support virtual keyboards?) so it had me thinking about that Firefox Mobile exists. I&#8217;m so used to the fact that <a href=\"https:\/\/css-tricks.com\/ios-browser-choice\/\">all browsers are Safari<\/a> on iOS (&#x1f92c;). But on Android, you can use &#8220;real&#8221; Firefox, which is a good reminder that not only do different mobile browsers exist, but different mobile browsers have different behavior as well.<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='471' height='750' src='https:\/\/videopress.com\/embed\/odfupYBF?preloadContent=metadata&amp;hd=0&amp;cover=1' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<p>In this video, which I&#8217;m sure predates support for <code>enterkeyhint<\/code>, note how the virtual keyboard offers UI for next automatically when focused on the first input (and no way to submit directly), but on the second (and last) the action, the button turns into a submit button (and there is no &#8220;previous&#8221; button). This is markedly different from iOS where all that&#8217;s offered is navigation between inputs with little up and down arrows that sit above the keyboard itself. <\/p>\n\n\n\n<p>All in all, a pretty cool feature that we should all at least be aware of if not use on most HTML forms we create to match the behaviors.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I only just recently learned the enterkeyhint attribute on form inputs was a thing! It seems like kind of a big deal to me, as crafting HTML form markup is a decent slice of a front-end developer&#8217;s life, and this attribute could (should?) be used on nearly every input.<\/p>\n","protected":false},"author":3,"featured_media":356075,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"As a serious web professional, I tried enterkeykint=\"poop\" but, alas, it was not respected by the browser.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[595,731],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/keyboard-enter-focus.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":305167,"url":"https:\/\/css-tricks.com\/using-the-html-title-attribute\/","url_meta":{"origin":355902,"position":0},"title":"Using the HTML title attribute","date":"March 15, 2020","format":false,"excerpt":"\u00a0Steve Faulkner: User groups\u00a0not well served\u00a0by use of the\u00a0title\u00a0attribute\u2022 Mobile phone users.\u2022 Keyboard only users.\u2022 Screen magnifier users.\u2022 Screen reader users.\u2022 Users with fine motor skill impairments.\u2022 Users with cognitive impairments. Sounds like in 2020, the only useful thing the title attribute can do is label an <iframe title=\"Contact Form\"><\/iframe>.","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":157368,"url":"https:\/\/css-tricks.com\/responsive-comments\/","url_meta":{"origin":355902,"position":1},"title":"Responsive Comments","date":"November 29, 2013","format":false,"excerpt":"Meaning like . You put a media query in a data-* attribute of a parent element and it will determine if that block of commented HTML should be un-commented or not. A form of conditional loading. If the HTML bloat bothers you, I suspect it could be easily adapted to\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":372979,"url":"https:\/\/css-tricks.com\/whats-new-with-forms-in-2022\/","url_meta":{"origin":355902,"position":2},"title":"What\u2019s New With Forms in 2022?","date":"September 8, 2022","format":false,"excerpt":"Browsers are constantly adding new HTML, JavaScript and CSS features. Here are some useful additions to working with forms that you might have missed\u2026 requestSubmit() Safari 16 will be the final browser to add support for requestSubmit. Before we look at how .requestSubmit() works, let\u2019s remind ourselves how programmatically submitting\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/forms.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":339960,"url":"https:\/\/css-tricks.com\/making-disabled-buttons-more-inclusive\/","url_meta":{"origin":355902,"position":3},"title":"Making Disabled Buttons More Inclusive","date":"May 12, 2021","format":false,"excerpt":"Let\u2019s talk about disabled buttons. Specifically, let\u2019s get into why we use them and how we can do better than the traditional disabled attribute in HTML (e.g. <button disabled> ) to mark a button as disabled. There are lots of use cases where a disabled button makes a lot of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/ticket-form-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":6997,"url":"https:\/\/css-tricks.com\/expanding-images-html5\/","url_meta":{"origin":355902,"position":4},"title":"Expanding Images using HTML5&#8217;s contenteditable tabindex","date":"August 9, 2010","format":false,"excerpt":"HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form elements like text inputs support the :focus pseudo class, which\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/08\/firefoxresizing.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":363745,"url":"https:\/\/css-tricks.com\/write-html-the-html-way-not-the-xhtml-way\/","url_meta":{"origin":355902,"position":5},"title":"Write HTML, the HTML Way (Not the XHTML Way)","date":"March 21, 2022","format":false,"excerpt":"You may not use XHTML (anymore), but when you write HTML, you may be more influenced by XHTML than you think. You are very likely writing HTML, the XHTML way. What is the XHTML way of writing HTML, and what is the HTML way of writing HTML? Let\u2019s have a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/xhtml.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/keyboard-enter-focus.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/355902"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=355902"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/355902\/revisions"}],"predecessor-version":[{"id":356074,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/355902\/revisions\/356074"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/356075"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=355902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=355902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=355902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}