この記事は【まんてらスタジオ】みんなの闇鍋 Advent Calendar 2022の10日目の記事です。
こんにちは。コンちゃんこと佐々木です。
Enterキーが反応しない問題が起きたので解決方法をメモっておきます。
以下コードをご覧ください。
See the Pen Untitled by conchan-akita (@conchan-akita) on CodePen.
検索ボックスと検索ボタンがあります。
で、ここからなのですが、Android端末をお持ちの方はその端末で上記Resultを触ってみてください。
このページのQRコードを貼っておきます。
![本ページ自身を開くQRコード](https://conchan.akita.jp/blog/wp-content/uploads/2022/11/qrcode_conchan.akita_.jp_.png)
入力欄に入力して、そのままキーボードのEnterキーを押してみてください。
「検索しました」と表示されましたでしょうか…?
たぶん表示されていないかと思います。
実はAndroid仮想キーボードのEnterキーのところ(右下)に表示されていたのは、Enterキーではなかったのです。
inputボックスにカーソルを当てると、こんなキーボードが表示されています。
![enterkeyhint属性がないinputにカーソルがあるときのAndroidキーボードのスクショ](https://conchan.akita.jp/blog/wp-content/uploads/2022/11/Screenshot_20221120-205118.png)
右下のキーは、Nextキーです。
Enterキーではなかったので検索できなかったのです……。
これを解決するには、inputタグにenterkeyhint属性を指定してあげます。
See the Pen sample search box with enterkeyhint by conchan-akita (@conchan-akita) on CodePen.
今度はキーボード右下がenterキーになっています。
![enterkeyhint属性があるinputにカーソルがあるときのAndroidキーボードのスクショ](https://conchan.akita.jp/blog/wp-content/uploads/2022/11/Screenshot_20221120-205143.png)
タップすると「検索しました」と表示されます!
以上、仮想キーボードのEnterが反応しないと思ったらenterkeyhint属性を確認しよう、というお話でした。
参考
HTML[enterkeyhint属性]Enterキーに表示されるラベルの種類を指定する – TAG index