15
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

iPhoneのキーボードにある「開く」ボタンを制御する方法について

Posted at

iPhoneのキーボードにある「開く」ボタン、デフォルトの挙動としてはformのsubmitにあたります。
ところが実際には、フォームをまだ最後まで書き終えてない時点で「開く」を押した際、勝手にsubmitされては困りますね。

できれば、submitではなく「キーボードを閉じる」もしくは「次の入力欄へ移る」挙動になっていたほうが良い。

そんなときは、keypressイベントをpreventDefaultしてあげると良いです。
iPhoneの開くボタンも、PCのエンターキーを押すことと同等の扱いのようですね。

「開く」を押したらキーボードが閉じるようにする.js
(function preventKeyBoardSubmit(){
    if(!isSP()) return;

    // スマホで決定ボタンをおした時にformがsubmitされるのを防ぐ。キーボードを閉じる挙動で代替させる。
    $('input').on('keypress', (e) => {
        if(e.keyCode === 13){
            e.preventDefault();
            
            // 現在フォーカスしている入力欄からフォーカスを外すことで、キーボードを強制的に閉じる
            document.activeElement.blur();
            $('input').blur();
        }
    });
})();
15
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?