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

      

  • 相关阅读:
    在JS中如何去掉千分号
    JS中showModalDialog详细使用
    js里的insertCell和appendChild的区别
    js showModalDialog
    js中innerHTML,innerText,outerHTML的用法和区别
    MYSQL入门指导
    对拍程序C语言实现
    人性的弱点
    POJ3207(2SAT)
    期末考试时间安排
  • 原文地址:https://www.cnblogs.com/zzghk/p/11271804.html
Copyright © 2011-2022 走看看