1. 程式人生 > >h5鍵盤遮擋輸入框問題 、模仿微信輸入框失去焦點時隱藏iphone的軟鍵盤和聚焦時出現輸入框

h5鍵盤遮擋輸入框問題 、模仿微信輸入框失去焦點時隱藏iphone的軟鍵盤和聚焦時出現輸入框

最近的專案做得是混合開發,其實比較尷尬的啦,手機端的安卓與ios挺多相容問題的。

1、手機端h5頁面中輸入法鍵盤會遮擋輸入框的問題。

      $('input').on('focus',function(event){      
       //自動反彈 輸入法高度自適應
        var target = this;
        setTimeout(function(){
            target.scrollIntoViewIfNeeded();
        },100);
    });

由於不同的輸入法鍵盤高度不一致,這使得我們在開發當中要做很多相容,但是針對不同的輸入法鍵盤和不同的手機去做這樣一個相容是很耗費時間的。

像蘋果手機就有自帶的輸入法,當我們使用自帶的輸入法時,鍵盤也許不會遮擋輸入框,然而使用者會使用各種各樣的輸入法。

所以,

jquery的scrollIntoViewIfNeeded()方法,可以做到將輸入框移動至視野中。

從而解決了鍵盤遮擋文字輸入框的問題。

2、模仿微信輸入框失去焦點時隱藏iphone的軟鍵盤和聚焦時出現輸入框

function BlurOrFocus(){
     var obj = document.getElementsByClassName('input')[0];
   var  docTouchend = function(event){

       if(event.target!=obj){
           setTimeout(function(){
               obj.blur();
               document.removeEventListener('touchend',docTouchend,false);
           },1000);

       }
   }

     if(obj){
         obj.addEventListener('touchstart',function(){
             document.addEventListener('touchend',docTouchend,false);
         },false);
     }

}


BlurOrFocus();

這裡是實現了當手觸碰到文字輸入框之外的地方,就將輸入法鍵盤隱藏。