Today I Learned - Rocky Kev

TIL about changing the enter key on virtual keyboards

POSTED ON:

TAGS: mobile html codepen

On mobile devices - you get a virtual keyboard to interact with input field. Did you know you can change what the enter key says (the button to the right of the L)?

The enterkeyhint attribute is a global attribute that can be applied to form controls or elements that have contenteditable set to true. This attribute assists users on mobile devices that use a virtual on-screen keyboard.

<input type="text" enterkeyhint="done">

You can change that enterkeyhint to any of the following:

You can try it yourself in this codepen:

See the Pen Using the enterkeyhint Attribute by Smashing Magazine (@smashingmag) on CodePen.

Via Those HTML Attributes You Never Use via Louis Lazaris

Related TILs

Tagged: mobile

TIL safe areas for mobile browsers

The problem you quickly encounter is that the visible viewport is not per se the same as the interactive viewport. Mobile browsers tend to prioritize essential UI elements (like the home-bar on IOS) for interactivity at all times.

TIL you can make SMS links

So you can make a 'mailto:' and a 'tel:' link. But did you know you can also do 'sms' messages too?

TIL about changing the enter key on virtual keyboards

use 'enterkeyhint'.