HTML enterkeyhint Attribute

Last Updated : 30 Aug, 2024

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 use 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 the 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 that can work according to the value that 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.

HTML

<!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>