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

兼容问题:

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有无焦点的判断.

转载于:https://www.jianshu.com/p/4dc7973d4ac8