Divモバイルで入力をカバーする

Question

私はWebアプリケーションを作成していますが、私のCSSには問題があります。

私はモバイル上で、私は<input type="text">上のテキストを入力するとき、このCSSコード

<div id="menu" style="background-color: rgb(255, 255, 255); bottom: 0px; position: fixed; left: 0px; width: 100%; box-shadow: 1px 1px 4px 3px rgba(0, 0, 0, 0.32); margin-top: 80px; overflow: hidden;"> 

</div> 

問題で底に固定<div>が来て持って、私のdivは私の入力をカバーし、私は何を参照するためのページをスクロールする必要があります私は書いています。私はこの問題を解決するにはどうすればよい

？

ありがとうございました！

Answer 1

入力をフォーカスしている間に隠すことができます。あなたのコードがどのように書かれているか、そしてあなたのアプリがどのように動作しているかによって、それを行うためのいくつかのトリックがあります。

最も簡単な方法は、多分最高のは、この

$(document).ready(function() { 

$("input").click(function(){ 
     $("#menu").hide(); 
      }).blur(function(){$("#menu").show(); 
}); 

のようなものであるが、この場合には、それはページ上のすべての入力を取りません。これは、あなたが変えることができ、改良することができる単なるソリューションの例です。さらに、携帯電話でのみ動作させる必要があります。 また、ユーザーにキーボードが表示されていることを示すモバイル画面の変更を確認するソリューションもあります。画面の高さが変わると、カバーするdivを表示/非表示にします。