概要
iOS/Androidのソフトウェアキーボードが出てきた時のイベントをaddEventListenerとかで検出したい
問題
色々調べたが、キーボードの出し入れに対するイベントは存在しないっぽい
代わりに
「キーボードが出てきた/引っ込んだ」というのは
input="text"とかにフォーカスが当たったか否かによるので
DOMFocusIn/DOMFocusOut
http://help.dottoro.com/ljuoivsj.php
というのが使えそうというのが調べてて分かった
example.js
document.addEventListener("DOMFocusIn", function(event) {
//キーボードが出現した時
}, false);
document.addEventListener("DOMFocusOut", function(event) {
//キーボードが引っ込んだ時
}, false);
もうちょっと厳密にするには下記のようにする必要があるかもしれない
#textareaもあればそっちも検知しないといけない
#input typeもdateとかがページにあれば追加する必要があるかも…
example.js
//input typeを限定する
var focuscheck_type = ["text", "search", "tel", "url", "email", "password"];
document.addEventListener("DOMFocusIn", function(event) {
if(!event.target) {
return;
}
var is_target = false;
for(var i = 0; i < focuscheck_type.length; i++) {
if(event.target.type === focuscheck_type[i]) {
is_target = true;
break;
}
}
if(!is_target) {
return;
}
//キーボードが出現した時の処理
}, false);
追記
下記のようなAndroidの一部端末において
- ARROWS NX F-02G(Android 4.4.2) - chrome
- GALAXY SC-02G(Android 4.4.2) - chrome
普通にaリンクを叩いた時もイベントが発生する場合があるのを確認できました。
やはり発生させるオブジェクトを限定させたほうが良さそう。。