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();

这里是实现了当手触碰到文本输入框之外的地方，就将输入法键盘隐藏。