2023/07/20
意外と知らない?HTMLのenterkeyhint属性
![](https://next-code.jp/wp-content/uploads/2023/07/20230727_意外と知らない?HTMLのenterkeyhint属性.jpg)
意外と知らないシリーズです。
今回は、HTMLのenterkeyhint属性について説明致します。
enterkeyhint属性で何が出来るかというと…..
input[type=text」に指定ができ、inputにカーソルした際に表示されるスマホなどのソフトウェアキーボードの「エンターキー」の部分を変更出来る属性になります。
HTMLでの指定のやり方は次の様になります。
<input type="text" enterkeyhint="enter">
そして、実際に見てみると次の様な家蔵になります。
※iPhoneのソフトウェアキーボードです。
![](https://i0.wp.com/next-code.jp/wp-content/uploads/2023/07/enterkeyhint_image01.jpg?resize=1024%2C916&ssl=1)
では、enterkeyhint属性に指定できる値を見てみましょう。
enter
「入力」を意味します。
![](https://i0.wp.com/next-code.jp/wp-content/uploads/2023/07/enterkeyhint_enter.jpg?resize=1024%2C909&ssl=1)
done
完了を意味します。
![](https://i0.wp.com/next-code.jp/wp-content/uploads/2023/07/enterkeyhint_done.jpg?resize=1024%2C910&ssl=1)
go
行くを意味します。
![](https://i0.wp.com/next-code.jp/wp-content/uploads/2023/07/enterkeyhint_go.jpg?resize=1024%2C910&ssl=1)
next
次へを意味します。
![](https://i0.wp.com/next-code.jp/wp-content/uploads/2023/07/enterkeyhint_next.jpg?resize=1024%2C908&ssl=1)
previous
前へを意味します。
こちらに関しては、iPhoneのローマ字キーボードでは変化はありませんでした。
![](https://i0.wp.com/next-code.jp/wp-content/uploads/2023/07/enterkeyhint_previous.jpg?resize=1024%2C906&ssl=1)
search
検索を意味します。
![](https://i0.wp.com/next-code.jp/wp-content/uploads/2023/07/enterkeyhint_search.jpg?resize=1024%2C910&ssl=1)
send
送信を意味します。
![](https://i0.wp.com/next-code.jp/wp-content/uploads/2023/07/enterkeyhint_send.jpg?resize=1024%2C913&ssl=1)
以上になります。
指定しなくても問題ないかとは思いますが、ユーザーの使いやすさを考えると指定してあげると良いのかもしれません!
私は指定するか分かりませんが、いつかしたいと思います。