手机端自动隐藏输入法。

最近接到产品的需求是要给移动手机端的所有的input和textarea框加上自动隐藏输入法的功能。即当用户调出输入法的时候，拖动滚动条自动隐藏输入法。

于是，想到把事件写在滚动条上以及可以通过blur()事件去掉输入法，就有了下面的代码。

Mobi.bindBodyScrollTypeWritingEvent = function(){
    var time = 60, // 60毫秒的间隔 
    timer;
    window.onscroll = null;
    window.onscroll = function(){
      //函数节流
      if(typeof timer != "number"){
          timer = setTimeout(function(){
              var elem = document.activeElement;//焦点元素
              if(document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA"){
                  elem.blur(); 
              }
              timer = null;
          }, time);
      }
    }
}

本来以为这样就ok了，后面经测试发现当用户的网页里的input或者textarea框在屏幕的下方（即在屏幕的一半以下）时，此时用户点击输入框，手机浏览器会自动把在屏幕下方的输入框移到上方（即比较舒服的位置），进而间接导致了拖动了滚动条，结果触发了上面代码的scroll事件，所以此方案不行。。。

---

此时产品加了个小优化，及当点击非输入框时，自动隐藏输入法。

---

换了个思路，觉得应该从手指的touch事件去解决问题。网上查了下资料，没有特别好的解决方案。于是决定用touchend，因为每次触摸完屏幕才隐藏输入法，测试了下用touchend事件在安卓手机上测试时ok的，但在苹果手机上拖动滚动条时是不触发这个touchend事件的。最后，把touchend事件改为touchstart事件，问题解决。代码如下：

Mobi.bindBodyScrollTypeWritingEvent = function(){
    function mobiEnteringBlur(elem,time){
        var time = time || 100;
        if(elem.length == 0){
            return;
        }
        var docTouchStart = function(event){
            //点击非本节点及点击的节点不是输入框才blur()
            if(event.target != elem && event.target.tagName != 'INPUT' && event.target.tagName != 'TEXTAREA'){
                setTimeout(function(){
                    elem.blur();
                    document.removeEventListener('touchstart', docTouchStart, false);
                },time);
            }
        };
        elem.addEventListener('focus', function(){
            document.addEventListener('touchstart', docTouchStart, false);
        },false);
    }
    var elems = document.querySelectorAll('input,textarea');
    for(var i = 0;i < elems.length;i++){
        var inputField = new mobiEnteringBlur(elems[i]);
        inputField = null;
    }
}