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

      

  • 相关阅读:
    C puzzles详解【51-57题】
    C puzzles详解【46-50题】
    C puzzles详解【38-45题】
    C puzzles详解【34-37题】
    C puzzles详解【31-33题】
    C puzzles详解【26-30题】
    C puzzles详解【21-25题】
    C puzzles详解【16-20题】
    使用C++模板实现栈的求最小值功能
    模拟求幂运算,考虑的已经很周全了
  • 原文地址:https://www.cnblogs.com/zzghk/p/11271804.html
Copyright © 2011-2022 走看看