スマホで入力フォームにフォーカスインするとスマホのキーボードが表示される
このとき、入力して各キーボードの右下の決定ボタン(iOSならreturn、Androidなら矢印)をクリックしたときの制御をしたい
具体的には、この入力フォームがformタグの中にあり、特に制御しないと勝手にサブミットされてしまうためこれを防ぎたい
解決策
キーボードの決定ボタンを押されたことを検知して処理をいれたい
PCでもスマホでもキーボードで押されたキーはKeyboardEvent インターフェイスの keyプロパティで取得することができる
keyプロパティが持ちうる値は以下にリスト化されている
調べたところ、各キーボードの右下の決定ボタンはどちらもEnter
という値になった
ということはkeypress
イベントを監視して、そのイベントkeyがEnter
ならフォーカスを外すことをやってあげればよさそう
handleKeypress(e) { if (e.key === 'Enter') { cont el = document.activeElement; if (el) { el.blur() } } }
これで入力フォーム中にキーボードの決定ボタンを押すとキーボードが下がり、ボタンが再表示されるようになった
落とし穴
これで解決かと思ったが、意図せぬところで不具合になってしまった
それはテキストエリア(textarea)の入力フォームで改行しようとするとフォーカスが外れてキーボードが下がってしまう問題
テキストエリア(textarea)の入力フォームでの改行もEnter
イベントなのでフォーカスが外れてしまう
なのでやるならばフォーカスが当たっている要素がテキストエリアならフォーカスを外さないようにする必要がある
その場合は activeElement.tagName
でタグ名を取得するのがよさそう
cont el = document.activeElement; if (el && el.tagname !== 'TEXTAREA') { el.blur() }
ただ、あらゆるキーボード操作に対してこれで大丈夫なのかは自信がないので、JavaScriptでのキーボード制御はなるべくやめた方がよいような