兼容問題:

1.ios下input在失去焦點(diǎn)時(shí)底部留白的問題(因?yàn)閕os的鍵盤升起后頁面會重新計(jì)算高度)
2.安卓下input在獲得焦點(diǎn)后鍵盤升起擋住了輸入框
解決方案:插入一段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有焦點(diǎn)
            inputs.each(function(){//主要解決ios切換input框click事件和blur沖突導(dǎo)致切換下沉
              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有焦點(diǎn)
            inputs.each(function(){//主要解決ios切換input框click事件和blur沖突導(dǎo)致切換下沉
              haveFocus=$(this).is(":focus");//遍歷得到的每一個jquery對象
              if(haveFocus)
              {
                return false;
              }
            });
            if(!haveFocus)
            {
              window.scroll(0,0)
            }
          },300)
        }
      }});
  }
  inputManage();//初始化執(zhí)行一次
  window.addEventListener('hashchange',inputManage)//每次hash路由跳轉(zhuǎn)執(zhí)行一次
</script>

附注:ios下多個input切換時(shí)失去焦點(diǎn)事件和click事件會沖突,導(dǎo)致頁面會在鍵盤升起的時(shí)候造成異常的下沉(即滾動到底部),所以增加了遍歷input有無焦點(diǎn)的判斷.