前言

最近看到有一篇有關EnterKeyHint文章，整個手癢跑去玩玩看，官方說明這方式是針對虛擬鍵盤才會出現的效果，如下面表格:

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.

這功能只有手機版本的虛擬鍵盤才看得見，若你要用windows的虛擬鍵盤是看不見的歐!!ヽ(*。>Д<)o゜

創建Html

我們創建簡單易點的html，不需要殘虐自己一定要把版面排很齊。參考以下範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!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>Document</title>
</head>
<style>
    div{
        margin: 10px;
    }
    div>label{
        display: block;
    }
</style>
<body>
    <div>
        <label>Enter:</label>
        <input type="text" value="" enterkeyhint="enter">
    </div>
    <div>
        <label>Done:</label>
        <input type="text" value="" enterkeyhint="done">
    </div>
    <div>
        <label>Go:</label>
        <input type="text" value="" enterkeyhint="go">
    </div>
    <div>
        <label>Next:</label>
        <input type="text" value="" enterkeyhint="next">
    </div>
    <div>
        <label>Previous:</label>
        <input type="text" value="" enterkeyhint="previous">
    </div>
    <div>
        <label>Search:</label>
        <input type="text" value="" enterkeyhint="search">
    </div>
    <div>
        <label>Send:</label>
        <input type="text" value="" enterkeyhint="send">
    </div>
</body>
</html>

這幾些都是要focus在輸入框裡面就可以看得見，如下圖，這樣就會提升UI操作順暢。
依據自己評估，決定在使用。

[{"url":"/img/html-enterkeyHint/01.png","alt":""},{"url":"/img/html-enterkeyHint/02.png","alt":""},{"url":"/img/html-enterkeyHint/03.png","alt":""},{"url":"/img/html-enterkeyHint/04.png","alt":""},{"url":"/img/html-enterkeyHint/05.png","alt":""},{"url":"/img/html-enterkeyHint/06.png","alt":""},{"url":"/img/html-enterkeyHint/07.png","alt":""}]

題外話

Stefan Judis 曾經在2020年有提到 Enterkeyhint ，有支援 Safari 瀏覽器(IOS)，有興趣的人可以實驗看看。FireFox事實上是有出現，只是不像是Chrome一樣馬上出現，必須要按下去(Enter)才會出現，使用上需要自己拿捏使用方式，以免被客戶要求強迫修改。

文件參考

MDN - EnterKeyHint

CSS-TRICKS - enterkeyhint