web-dev-qa-db-ja.com

サイズ変更イベントがモバイルブラウザのソフトキーボードによってトリガーされたかどうかを判断するにはどうすればよいですか？

ソフトキーボードについては多くの議論がありますが、私はまだ私の問題に対する良い解決策を見つけていません。

私は次のようなサイズ変更機能を持っています：

$(window).resize(function() {
    ///do stuff
});

ソフトキーボードによってトリガーされる場合を除いて、すべてのサイズ変更イベントでその関数の「もの」を実行したいと思います。ソフトキーボードがサイズ変更をトリガーしたかどうかを確認するにはどうすればよいですか？

javascriptjqueryhtmlmobilebrowser
33
Jose Calderon

私は最近、これをチェックする必要があるいくつかの問題に遭遇しました。私はそれを次のように解決することができました：

$(window).on('resize', function(){
   // If the current active element is a text input, we can assume the soft keyboard is visible.
   if($(document.activeElement).attr('type') === 'text') {
      // Logic for while keyboard is shown
   } else {
      // Logic for while keyboard is hidden
   }
}

テキスト入力にのみ必要でしたが、明らかにこれは、ソフトキーボード/数値ピッカーなどをトリガーする可能性のあるあらゆる種類の要素に拡張できます。

17
kirisu_kun

Attr（）の代わりにprop（）を使用するようにkirisu_kunの答えを修正しました。

$(window).on('resize', function(){
   // If the current active element is a text input, we can assume the soft keyboard is visible.
   if($(document.activeElement).prop('type') === 'text') {
      // Logic for while keyboard is shown
   } else {
      // Logic for while keyboard is hidden
   }
}
8
CpnCrunch

問題は、アクティブな要素がフォーカスされている場合、フォーカスを変更せずにキーボードを閉じるだけでサイズ変更イベントをトリガーできることです。そのため、キーボードは非表示になりますが、コードはフォーカスの状態になります。

5
mobiledeckyou

私は同様の問題の解決策を探していました。私のサイズ変更イベントは、URL入力が表示されたり表示されなくなったりしたときにトリガーされていました。これは私が取り組んできたものです...可能な解決策がありますか？

したがって、基本的には、画面の幅だけが変更されたかどうかを確認し、サイズが異なる場合にのみ関数を起動します。

例えば：

var saveWindowWidth = true;
    var savedWindowWidth;

//set the initial window width
    if (saveWindowWidth = true){
        savedWindowWidth = windowWidth;
        saveWindowWidth = false;
    }


//then on resize...


$(window).resize(function() {

//if the screen has resized then the window width variable will update
        windowWidth = window.innerWidth;


//if the saved window width is still equal to the current window width do nothing
        if (savedWindowWidth == windowWidth){
            return;
        }


//if saved window width not equal to the current window width do something
        if(savedWindowWidth != windowWidth) {
           // do something

            savedWindowWidth = windowWidth;
        }

    });
3
Gee_63

あなたが集中する必要があるいくつかのことがあります

  1. すべてのソフトキーボードは高さのみに影響し、幅には影響しません。
  2. フォーカス要素タグは、inputまたはtextareaのいずれかです。
  3. 要素がフォーカスされると高さが減少します（または）フォーカスが外れると高さが増加します。

ブラウザのサイズが変更されたときにこれらの組み合わせを使用できます

function getWidth(){
return $( window ).width();
}

function getHeight(){
return $( window ).height();
}

function isFocus(){
return $(document.activeElement).prop('tagName')=='INPUT' || $(document.activeElement).prop('tagName')=='TEXTAREA';
}

var focused = false;
var windowWidth=getWidth(),windowHeight=getHeight();

//then on resize...    
$(window).resize(function() {

var tWidth=getWidth(),tHeight=getHeight(),tfocused=isFocus();

//if the saved window width is still equal to the current window width do nothing
if (windowWidth == tWidth && ((tHeight < windowHeight && !focused && tfocused) || (tHeight > windowHeight && focused && !tfocused))){
 windowWidth=tWidth;
 windowHeight=tHeight;
 focused=tfocused;
 return;
}
else{
 windowWidth=tWidth;
 windowHeight=tHeight;
 focused=tfocused;

 //Your Code Here

}
});
2
jafarbtech

この質問は、モバイルデバイスでオンスクリーンキーボードが表示される（または表示されなくなる）タイミングを検出する信頼できる方法があることに依存しています。残念ながら、これを検出する信頼できる方法はありません。同様の質問がSOで何度か出てきて、さまざまなハック、トリック、回避策が提案されています（いくつかの関連する回答スレッドへのリンクについては、 この回答 を参照してください）。

また、オンスクリーンキーボードが表示されたときに、サイズ変更イベントが常にトリガーされるとは限らないことに注意してください（ この回答 を参照）。

私の一般的な提案は、タッチスクリーンの存在を検出し、アクティブな要素がオンスクリーンキーボードをトリガーするタイプであるかどうかを検出することです（ この回答 に似ています）。ただし、このアプローチは、ハイブリッドWindowsデバイス（Surface Proなど）では失敗します。ブラウザーのサイズ変更時にオンスクリーンキーボードが表示される場合や、ブラウザーのサイズ変更時にハードウェアキーボードが使用される場合があります。

2
Tomas Langkaas

前の回答と同様ですが、フォーカスのあるフォームのすべての子を対象としています（明らかに、フォームの親がないと入力に失敗します）

$(window).resize(function() {
    if($('form *').focus()) {
        alert('ignore this');
    } else {
        // do the thing
    }
});

だから多分これ...

$(window).resize(function() {
    if($('input, select, etc').focus()) {
        alert('ignore this');
    } else {
        // do the thing
    }
});
2
Dawson