UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【JavaScript】JavaScriptでスマホのキーボード操作の落とし穴

スマホで入力フォームにフォーカスインするとスマホのキーボードが表示される

f:id:uggds:20220117002104p:plain

このとき、入力して各キーボードの右下の決定ボタン(iOSならreturn、Androidなら矢印)をクリックしたときの制御をしたい

具体的には、この入力フォームがformタグの中にあり、特に制御しないと勝手にサブミットされてしまうためこれを防ぎたい

解決策

キーボードの決定ボタンを押されたことを検知して処理をいれたい

PCでもスマホでもキーボードで押されたキーはKeyboardEvent インターフェイスの keyプロパティで取得することができる

developer.mozilla.org

keyプロパティが持ちうる値は以下にリスト化されている

Key Values - Web APIs | MDN

調べたところ、各キーボードの右下の決定ボタンはどちらもEnterという値になった

f:id:uggds:20220123175528p:plain

ということは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でのキーボード制御はなるべくやめた方がよいような