In this article, we will know the entrykeyhint attribute in the HTML. The enterkeyhint attribute is an enumerated attribute that specifies what action label to present for the enter key on virtual keyboards. This is the global attribute & allows authors to customize the presentation of the enter key in order to make it more helpful for users.
In our daily life, we are using smartphones. We have noticed the enter key of the phone’s keyboard as it changes always according to the action to be performed like when we are typing, sometimes it behaves like enter key, and also the same key sometimes behaves as a search button on search engines, etc. This all happens because of the enterkeyhint attribute. There are so many values present in the enterkeyhint attribute which can work according to the value which we specify there.
Syntax:
<input enterkeyhint = "values">
Attributes values:
- done: When there is nothing more to input and the input method editor will be closed.
- enter: When there is more to write but in a new line.
- go: When we have finished writing the form and want to go on the next target or form.
- search: When we have to search anything after typing then we will use this.
- send: It is used for sending messages.
- next: It will take the user to the next field that will accept text.
- previous: It will take the user to the previous field that will accept text.
Example: This example describes the enterkeyhint attribute & its usage by specifying the different values.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML enterkeyhint attributes</title>
</head>
<body>
<form>
<input placeholder="Enter button will change to Next" enterkeyhint="next">
<input placeholder="Enter button will change to previous" enterkeyhint="previous">
<input placeholder="Enter button will change to enter" enterkeyhint="enter">
<input placeholder="Enter button will change to done" enterkeyhint="done">
<input placeholder="Enter button will change to search" enterkeyhint="search">
<input placeholder="Enter button will change to go" enterkeyhint="go">
<input placeholder="Enter button will change to send" enterkeyhint="send">
</form>
</body>
</html>
|
Output: As you can notice in the output, every time the enter key icon changes according to its attribute.
output
Supported browsers:
- Google Chrome 77
- Firefox 94
- Microsoft Edge 79
- Safari 13.1
- Opera 66
- WebView Android 77