What is "enterkeyhint"?
The enterkeyhint property defining what action label/icon to present for the enter key on virtual keyboards.
Enterkeyhint gives more context while filling a form.
So, for example we have this code:
<form><label>
Name:
<input type="text" name="name">
</label>
<label>
Favorite songs:
<textarea name="songs"> </textarea>
</label>
<button>Save</button>
</form>
The user experience there suggests form that “Saves” but had a default value, the blue button in the keyboard says… "go."
That’s not a disaster or anything, but now I’ve got some options for that button.
| Keyword | Description |
|---|---|
enter |
The user agent should present a cue for the operation ‘enter’, typically inserting a new line. |
done |
The user agent should present a cue for the operation ‘done’, typically meaning there is nothing more to input and the input method editor (IME) will be closed. |
go |
The user agent should present a cue for the operation ‘go’, typically meaning to take the user to the target of the text they typed. |
next |
The user agent should present a cue for the operation ‘next’, typically taking the user to the next field that will accept text. |
previous |
The user agent should present a cue for the operation ‘previous’, typically taking the user to the previous field that will accept text. |
search |
The user agent should present a cue for the operation ‘search’, typically taking the user to the results of searching for the text they have typed. |
send |
The user agent should present a cue for the operation ‘send’, typically delivering the text to its target. |
For the form example above… the value enter or done somehow feels better to me than go. If we want to change that, I would add the attribute for all interactive form elements like that:
<form><label>
Name:
<input type="text" id="name" name="name" enterkeyhint="done">
</label>
<label>
Favorite songs:
<textarea id="songs" name="songs" enterkeyhint="done"> </textarea>
</label>
<button enterkeyhint="done">Save</button>
</form>
And now the action key will look like this:
Javascript code will look like this:
const send = document.getElementById(`name`);
const search = document.getElementById(`songs`);
send.enterKeyHint = `send`;
search.enterKeyHint = `search`;
This attribute goes on the form inputs, so it feels a bit repetitive writing it for each and every input.. But it does give you an opportunity to change it depending on what input is focused.
Perhaps the web browser platforms doesn’t want to offer something that tells users something they can’t possibly enforce? I’m not sure that’s the case, because if you put in next or previous that does not change the behavior at all - you’d have to code that yourself if what you want to do is move focus to the next or previous inputs.
Here you can read the specification for this attribute: https://html.spec.whatwg.org/.
ritnikotkata.com
Be the first to comment