スマホのキーボード表示時に javascript でスクロール制御

オウルです。

スマホで Web サイトの入力フォームに入力する際にうっかり画面をスクロールしてしまい、どこの入力フォームだったか分からないって経験ありますか。僕はないです。気にしたことがないってのが正しいかもしれません。
でも、気になる人もいるみたいで、その時に対応したことをせっかくなので書いてみます。

コード

<div>
    <input type="text" id="search-word" class="form-control" />
</div>

@section Scripts {
    <script>
        window.onload = function () {
	    var text = document.getElementById('search-word');
	    var scrollOff = function (event) {
	        event.preventDefault();
	    }
	    text.addEventListener('focusin', function (event) {
	        document.addEventListener('touchmove', scrollOff, { passive: false });
	    }, false);
	    text.addEventListener('focusout', function (event) {
	        document.removeEventListener('touchmove', scrollOff);
	    }, false);
	};
    </script>
}

<div>

</div>

@section Scripts {

window.onload = function () {

var text = document.getElementById('search-word');

var scrollOff = function (event) {

event.preventDefault();

}

text.addEventListener('focusin', function (event) {

document.addEventListener('touchmove', scrollOff, { passive: false });

}, false);

text.addEventListener('focusout', function (event) {

document.removeEventListener('touchmove', scrollOff);

}, false);

};

</script>

}

focusin イベント発火時に addEventListener の引数 options で、passive = false を明示的に指定しています。指定しないと、Chrome のデベロッパーツールのコンソールで ↓ 警告が表示されます。

Chrome Platform Status: Treat Document Level Touch Event Listeners as Passive

なぜ？？という理由は ↓ に説明してくれています。

Google Developers: Making touch scrolling fast by default

touchmove イベント発火時に scrollOff 関数で preventDefault() を呼んでいます。

MDN – Mozilla: イベントリファレンス

preventDefault()

Event インターフェースの preventDefault() メソッドは、イベントが明示的に処理されない場合に user agent に、そのデフォルトアクションを通常どおりに行うべきではないと伝えます。このイベントは通常、イベントリスナーの1つが stopPropagation() または stopImmediatePropagation() を呼び出し、いずれかが一度に伝播を終了しない限り、伝播し続けます。

https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefaultより引用

つまり、ここでは touchmove デフォルトアクションを止めて、スクロールしないということです。

せっかくなので addEventListener の引数 useCapture もついでに。

MDN – Mozilla: addEventListener