手机端自动隐藏输入法。

最近接到产品的需求是要给移动手机端的所有的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;
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,482评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,251评论 4 61
  • 真心太丑陋,实话太刺耳。 所谓候鸟,便是那些随着季节变化而南北迁移的鸟类。人自然不用迁徙,但在某些情况下,人却像候...
    妙桐色阅读 17,581评论 4 5
  • 浒坑,是个小镇。 一条马路穿镇而过,一条小溪绕镇而流,倒也是个风水宝地来的。小镇不大,从西到东也就十来分钟就可以走...
    壹個人説阅读 348评论 0 0