h5開發安卓機型點擊輸入框調起輸入法,輸入框被鍵盤遮擋的解決方法

前言:css

從之前的項目中找一個問題的解決方案,順帶找到了這個安卓機型調起輸入法,頁面沒有自動上滑致使輸入框被彈起的鍵盤遮擋的解決方案。這個問題只有安卓機型頁面中的輸入框處於底部(也就是底部鍵盤區域)的時候纔會出現,近一年的項目中不多有表單輸入比較多的場景,因此一直都沒碰到這種問題。如今記錄下來,之後須要的時候好找些。vue

示例代碼:android

公共方法封裝:this

//調起輸入法,鍵盤自動上滑
function inputUp(ele){
  //安卓機型,自動上滑露出輸入框
  var u = navigator.userAgent;
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
  if(isAndroid){
    $(ele).on('click', function () {
      var target = this;
      setTimeout(function(){
            target.scrollIntoViewIfNeeded();
       },100);
    });
    $(ele).on('focus', function () {
      //自動反彈 輸入法高度自適應
      var winHeight = $(window).height(); //獲取當前頁面高度
        $(window).resize(function() {
          var thisHeight = $(this).height();
          if (winHeight - thisHeight > 50) {
            //當軟鍵盤彈出,在這裏面操做
            $('body').css('height', winHeight + 'px');
          } else {
            //當軟鍵盤收起,在此處操做
            $('body').css('height', '100%');
          }
        });
    });
  }
}

方法使用:spa

vue項目爲例,須要在頁面渲染的時候進行調用,其中num爲輸入文本框的類名。通常頁面頂部的文本框不須要處理,底部須要處理的全部的文本框都要調用這個方法。code

1 mounted: function(){
2     common.inputUp('.num');
3 }
相關文章
相關標籤/搜索