inputがフォーカスを取得すると、下のメニューが問題の解決方法に突き上げられます。

コードは以下の通りです。

<div class="search-box">
  <input class="search-input" type="text" placeholder="     ">
</div>
<!--  -->
<div id="mini_nav" class="nav bt-nav">
  <div>
    <ul>
      <li><a href="#"><span class="ico-home"></span>
            
        </a>
      </li>
      <li><a class="selected-menu" href="#"><span class="ico-shop"></span>
            
        </a>
      </li>
      <li><a href="#"><span class="ico-service"></span>
            
        </a>
      </li>
      <li><a href="#"><span class="ico-me"></span>
            
        </a>
      </li>
    </ul>
  </div>
</div>

inputがフォーカスを取得すると、下のメニューが問題解決策に突き上げられます。
1.短いページであれば、登録ページのように、上部の登録フォームdivは下のメニューdivと重複しない（二つのdivは同級の）。登録フォームdivを設定するz-indxは下のメニューdivのz-indxより大きいので、ページのロードが完了した後、二つのdivは重複しない。その階層設定も影響を受けない。inputでフォーカスを取得した後、ソフトキーボードがイジェクトされ、二つのdivが重複しています。上部登録フォームdivを設置したz-indxは下メニューdivのz-indxより大きいので、下のメニューdivはブロックされます。つまり、上の下のメニューが見えないので、問題は自然に解決されます。
注意：z-inndexは、position属性値がデフォルトのstaticの場合は有効ではありません。
2.長いページであれば、商品の展示ページのように、上部の商品の展示divは必ず下のメニューdivと重複します。階級（z-inndex）を設定するのは無理です。そこで、jsを使って底のメニューdivのpositionの値を制御して解決します。

 $('.search-input').bind('focus',function(){
   $('#mini_nav').css('position','static');
 }).bind('blur',function(){
$('#mini_nav').css({'position':'fixed','bottom':'0'});
});

説明：inputでフォーカスを取得すると、下のメニューdivのposition値をstaticに変更します。documentの最後に置かれます。ソフトキーボードの上には現れません。inputがフォーカスを失うと、下のメニューdivのpositionをfixedに戻して、下のメニューdivを再び視認口の底に戻します。
ここで、私達はもう一つの疑問があります。もしソフトキーボードがボタンを押して閉じるなら、inputは焦点を失うことはないので、blurイベントはトリガされません。下のメニューdivのpositionもfixedに変えられません。そこで、キーボードを操作してイベントを収めることで、下のメニューdivのpositionを変えることができます。
では、ソフトキーボードをどう捉えて事件を解決しますか？インターネットで長い間検索して、やっと一つの解決策を見つけました。目のサイズによって判断します。
jsコードは以下の通りです

var wHeight = window.innerHeight; //           
window.addEventListener('resize', function(){ //            
  var hh = window.innerHeight; //         
  var viewTop = $(window).scrollTop(); //                  
  if(wHeight > hh){ //             
    $(".content").animate({scrollTop:viewTop+100}); //          
    //do something... 
  }else{ //             
    //$("content").animate({scrollTop:viewTop-100}); 
    $('#mini_nav').css({'position':'fixed','bottom':'0'});//            div position
  } 
  wHeight = hh; 
});

OK、完成。
実際には、ユーザーがページをスクロールする時に、inputがフォーカスを失ってblurイベントをトリガします。要求が特に厳しくないなら、この小さな問題は無視できます。
以上は小编が皆さんに绍介したinputで焦点を合わせる时、下のメニューが上の问题の解决方法に上がるので、皆さんに助けを求めています。ここでも私たちのサイトを応援してくれてありがとうございます。