jquery mobileモバイルWebブラウザでフォーカスを合わせた入力にオートスクロールを停止する方法

Question

モバイルデバイスでは、自分のページを開いて入力ボックスを選択すると、仮想キーボードが開き、ページが自動的にスクロールされてinputboxが中央に配置されます。

私はこの行動を望んでいません。 私はたくさんの回答を探そうとしていますが、そのほとんどはサイズ変更イベントでjavascriptコードを手動で呼び出すように提案されています。

しかし、私が試したときに、ページがスクロールダウンされたようにひっくり返ってしまい、まもなく戻ってきました。

良い解決策はありますか？おかげさまで

Answer 1

大丈夫です。

だから今、あなたは答え、以下により、仮想キーボードにオープンイベントを検出する方法を知っている：ラフなアプローチについて jquery mobile how to detect if mobile virtual keyboard is opened

を、あなたはハンドラに次のコードを追加することができます。

setTimeout(function(){ 
    window.scrollTo(0,0); 
}, 100); 

しかし、これは本当になりますページがちらつき、滑らかな解決策ではありません。

あなたが知る必要があるのは、モバイルデバイスがアクティブな入力要素の位置を検出しようとしていて、キーボードによって隠れている場合は、ページ全体をスクロールして完全に表示させることです。だからここ

は、トリッキーな方法です：あなたは、ちょうどその要素は現在、非常にトップの位置であり、このトリックは、のiOSとアンドロイドのために別の方法で行われることになると思うし、モバイルデバイスを欺きます。

のiOS

コードは、iOS用の完璧な動作します次のとおりです。仮想キーボードのオープンイベントハンドラで

$(document).on('touchstart', 'textarea, input[type=text], input[type=date], input[type=password], input[type=email], input[type=number]', function(e){ 

      var intv = 100; 
      var $obj = $(this); 

      if (getMobileOperatingSystem() == 'ios') { 

       e.preventDefault(); 
       e.stopPropagation(); 

       $obj.css({'transform': 'TranslateY(-10000px)'}).focus(); 
       setTimeout(function(){$obj.css({'transform': 'none'});}, intv); 
      } 
      return true; 
     }); 

アンドロイド

を、アクティブな入力要素上のいくつかの要素を隠し、モバイルデバイスがアクティブな入力要素が非常に上にあると思うようにして、数秒後に隠れたものを再び表示させます。

次のサンプルコードでは、$ wrapはページ全体のコンテンツで、$ wrap.find（ '。content'）はアクティブな入力ボックスの上にある要素なので、単にモバイルデバイスを騙すために隠すだけです。まもなく再び表示されます。

これまでのところ、これらは動作コードですが、モバイルデバイスOSの新しいバージョンでは保証されていません。 :-)

正直、私は本当にモバイルウェブブラウザがこのような頭痛の問題を処理するためのいくつかのフックと機能をサポートしたいと思っています。