35

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

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

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

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

4

8 に答える 8

21

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

$(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
   }
}

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

于 2013-03-01T23:03:00.997 に答える
5

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

于 2014-01-08T12:06:16.743 に答える
3

集中しなければならないことがいくつかあります

  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

}
});
于 2016-11-24T20:07:31.280 に答える