h5键盘遮挡输入框问题 、模仿微信输入框失去焦点时隐藏iphone的软键盘和聚焦时出现输入框

1、手机端h5页面中输入法键盘会遮挡输入框的问题。借助元素的 scrollIntoViewIfNeeded() 方法；

    scrolllntoViewlfNeeded():执行后如果当前元素在视口中不可见，则会滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中已经是可见的，这个方法什么也不做。

由于不同的输入法键盘高度不一致，这使得我们在开发当中要做很多兼容，但是针对不同的输入法键盘和不同的手机去做这样一个兼容是很耗费时间的。

像苹果手机就有自带的输入法，当我们使用自带的输入法时，键盘也许不会遮挡输入框，然而用户会使用各种各样的输入法。

所以，

jquery的scrollIntoViewIfNeeded()方法，可以做到将输入框移动至视野中。

1.使用jQuery 绑定了所有输入框（textinput、textarea）的点击事件，这样当输入框被点击后就调用它的 scrollIntoViewIfNeeded() 方法，保证输入框可见。（延迟400毫秒出现时有些 Android 手机键盘出现的比较慢）

$('input[type="text"],textarea').on('click', function () {
  var target = this;
  setTimeout(function(){
        target.scrollIntoViewIfNeeded();
        console.log('scrollIntoViewIfNeeded');
      },400);
});

2.       $('input').on('focus',function(event){      
       //自动反弹 输入法高度自适应
        var target = this;
        setTimeout(function(){
            target.scrollIntoViewIfNeeded();
        },100);
    });

从而解决了键盘遮挡文本输入框的问题。

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

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