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