美文网首页Web前端之路前端开发
前端记录:关于input在ios和安卓下的兼容性问题

前端记录:关于input在ios和安卓下的兼容性问题

作者: 阳光的噗哈哈 | 来源:发表于2019-05-28 15:45 被阅读0次

    兼容问题:

    1.ios下input在失去焦点时底部留白的问题(因为ios的键盘升起后页面会重新计算高度)
    2.安卓下input在获得焦点后键盘升起挡住了输入框
    解决方案:插入一段jquery脚本,绑定所有input组件的click和blur事件

    <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下多个input切换时失去焦点事件和click事件会冲突,导致页面会在键盘升起的时候造成异常的下沉(即滚动到底部),所以增加了遍历input有无焦点的判断.

    相关文章

      网友评论

        本文标题:前端记录:关于input在ios和安卓下的兼容性问题

        本文链接:https://www.haomeiwen.com/subject/jkydtctx.html