遠位記録:互換性の問題とアンドリュースでのIOSの入力について

互換性の問題:

入力された問題(ページがIOSキーボード上昇高さの後に再計算されるため)、それは低い1.iosの下部に空白をフォーカスを失ったとき
、入力ボックスブロッキング上昇を取得した後、キーボード入力フォーカスで2アンドリュース
溶液:jqueryの挿入スクリプト、すべてのクリックを結合して、イベント入力モジュールをぼかします

<script>
  var u = navigator.userAgent;
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

    $('input,textarea').on({click: function () {
        if(isAndroid) {
          var target = this;
          setTimeout(function () {
            target.scrollIntoViewIfNeeded();
          }, 600);
        }
      },blur:function () {
        if(isiOS)
        {
          setTimeout(()=>{
            var inputs = $('input,textarea');
            var haveFocus=false;//判断页面是否有input有焦点
            inputs.each(function(){//主要解决ios切换input框click事件和blur冲突导致切换下沉
              haveFocus=$(this).is(":focus");//遍历得到的每一个jquery对象
              if(haveFocus)
              {
                return false;
              }
            });
            if(!haveFocus)
            {
              window.scroll(0,0)
            }
          },300)
        }
      }});
</script>
/**针对hash单页路由的版本**/
<script>
  function inputManage(){
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

    $('input,textarea').on({click: function () {
        if(isAndroid) {
          var target = this;
          setTimeout(function () {
            target.scrollIntoViewIfNeeded();
          }, 600);
        }
      },blur:function () {
        if(isiOS)
        {
          setTimeout(()=>{
            var inputs = $('input,textarea');
            var haveFocus=false;//判断页面是否有input有焦点
            inputs.each(function(){//主要解决ios切换input框click事件和blur冲突导致切换下沉
              haveFocus=$(this).is(":focus");//遍历得到的每一个jquery对象
              if(haveFocus)
              {
                return false;
              }
            });
            if(!haveFocus)
            {
              window.scroll(0,0)
            }
          },300)
        }
      }});
  }
  inputManage();//初始化执行一次
  window.addEventListener('hashchange',inputManage)//每次hash路由跳转执行一次
</script>

注意:キーボードが発生したときに、複数の入力でのiOS競合が(端部に転がり、すなわち)に異常が発生しますページの沈没で、その結果、切り替え時のフォーカスイベントとクリックイベントを失い、それが判断するかどうかフォーカストラバーサル入力が増加します。

ます。https://www.jianshu.com/p/4dc7973d4ac8で再現

おすすめ

転載: blog.csdn.net/weixin_33896069/article/details/91344067