zoukankan      html  css  js  c++  java
  • 总结:苹果系统H5页面软键盘弹出造成点击事件失效

    问题描述:苹果系统,软键盘弹出,键盘再收起时,原虚拟键盘位点击事件无效。

    排查过程:只有iphonex、iphone6,ihpone7等部分机型会出现该问题;

    原因:在IOS下,点击页面中的input时,弹出软键盘时,如果input比较靠下,整个页面会上移,document.body.scrollOffset会由0变成大于0。 软键盘消失后,页面会下移。但是document.body.scrollOffset并不会变成0,所以这时候触控不准;

    解决办法:失去焦点

     $('textarea,input').on('blur', function (event) {
                document.body.scrollTop = 0;
        });
    

     

    或者
    $("input").blur(function() { console.log("失去焦点"); window.scrollTo(0, 0); });

    ==========================新的处理办法========================

    //ios 软键盘处理,页面错位恢复问题
    var isReset = true;
        var u = navigator.userAgent;
        var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        function scrollTO() {
            //软键盘收起的事件处理
            isReset = true;
            setTimeout(function () {
                //当焦点在弹出层的输入框之间切换时先不归位
                if (isReset) {
                    window.scrollTo(0, 0);//失焦后强制让页面归位
                }
            }, 300);
        }
    
     if (isiOS) {//ios
          document.body.addEventListener('focusin', function () {
           //软键盘弹出的事件处理
            isReset = false;
        });
        document.body.addEventListener('focusout', scrollTO);
    }
    
     document.body.removeEventListener('focusout', scrollTO);
    

      

  • 相关阅读:
    listview 加载性能优化 viewholder
    eclipse使用有感
    android常见的错误
    填充父窗体布局问题
    setTag()/getTag()
    自己动手实现自旋锁
    新手学信息检索6:谈谈二值独立模型
    自己动手编译、运行Java程序
    新手学信息检索5:正确率召回率与搜索引擎的评价
    新手学信息检索4:向量空间模型与相似度计算
  • 原文地址:https://www.cnblogs.com/zzghk/p/11271804.html
Copyright © 2011-2022 走看看