58
51

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.

JavascriptでiPhone/Androidのソフトウェアキーボード出現を検出したい

Last updated at Posted at 2015-02-17

概要

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リンクを叩いた時もイベントが発生する場合があるのを確認できました。
やはり発生させるオブジェクトを限定させたほうが良さそう。。

58
51
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
58
51

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?