總結幾個移動端H5軟鍵盤的大坑

時間 2020-03-24

標籤總結幾個移動 h5 鍵盤大坑欄目無線简体版

原文原文鏈接

一、部分機型軟鍵盤彈起擋住原來的視圖

解決方法：能夠經過監聽移動端軟鍵盤彈起javascript

Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。參數以下。前端

true，表示元素的頂部與當前區域的可見部分的頂部對齊
false，表示元素的底部與當前區域的可見部分的尾部對齊

Element.scrollIntoViewIfNeeded()方法也是用來將不在瀏覽器窗口的可見區域內的元素滾動到瀏覽器窗口的可見區域。但若是該元素已經在瀏覽器窗口的可見區域內，則不會發生滾動。此方法是標準的Element.scrollIntoView()方法的專有變體。java

window.addEventListener('resize', function() {
  if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
    window.setTimeout(function() {
      if ('scrollIntoView' in document.activeElement) {
        document.activeElement.scrollIntoView(false)
      } else {
        document.activeElement.scrollIntoViewIfNeeded(false)
      }
    }, 0)
  }
})

二、ios 鍵盤收起時頁面沒有回落，底部會留白

部分蘋果手機填寫表單的時候的，輸入內容後關閉軟鍵盤，底部會留一塊空白。這種狀況能夠經過監聽鍵盤迴落時間滾動到原來的位置。node

window.addEventListener('focusout', function() {
  window.scrollTo(0, 0)
})

//input輸入框彈起軟鍵盤的解決方案。
var bfscrolltop = document.body.scrollTop
$('input')
  .focus(function() {
    document.body.scrollTop = document.body.scrollHeight
    //console.log(document.body.scrollTop);
  })
  .blur(function() {
    document.body.scrollTop = bfscrolltop
    //console.log(document.body.scrollTop);
  })

三、onkeyUp 和 onKeydown 兼容性問題

部分 ios 機型中 input 鍵盤事件 keyup、keydown、等支持不是很好, 用 input 監聽鍵盤 keyup 事件，在安卓手機瀏覽器中沒有問題，可是在 ios 手機瀏覽器中用輸入法輸入以後，並未馬上相應 keyup 事件webpack

onkeypress 用戶按下並放開任何字母數字鍵時發生。系統按鈕（箭頭鍵和功能鍵）沒法獲得識別。
onkeyup 用戶放開任何先前按下的鍵盤鍵時發生。
onkeydown 用戶按下任何鍵盤鍵（包括系統按鈕，如箭頭鍵和功能鍵）時發生。

四、ios12 輸入框難以點擊獲取焦點，彈不出軟鍵盤

定位找到問題是 fastclick.js 對 ios12 的兼容性，可在 fastclick.js 源碼或者 main.js 作如下修改ios

FastClick.prototype.focus = function(targetElement) {
  var length
  if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
    length = targetElement.value.length
    targetElement.setSelectionRange(length, length)
    targetElement.focus()
  } else {
    targetElement.focus()
  }
}

五、fastclick 致使下拉框焦點衝突

移動端使用 fastclick 以後，在 ios 環境下，有幾個連續的下拉框第一個 select 框忽然填充了第二個下拉框的內容。git

根本緣由是 Fastclick 致使 ios 下多個 select ，點擊某一個，焦點不停變換的 bug。修改源碼，在 onTouchStart 事件內判斷設備是否爲 ios，再判斷當前 nodeName 是否爲 select，若是是 return false 去阻止 fastClick 執行其餘事件。github

github 源碼地址：fastclick.jsweb

//line 391行
FastClick.prototype.onTouchStart = function(event) {
  //在其方法中添加判斷 符合ios select的時候 不返回事件
  if (deviceIsIOS && this.targetElement == 'select') this.targetElement = null
  event.preventDefault()
}
//line521 或者講源碼中 有關touchEnd判斷非ios或者非select的事件註釋，
if (!deviceIsIOS || targetTagName !== 'select') {
  this.targetElement = null
  event.preventDefault()
}

六、ios 下 fixed 失效的緣由

軟鍵盤喚起後，頁面的 fixed 元素將失效，變成了 absolute，因此當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。不只限於 type=text 的輸入框，凡是軟鍵盤（好比時間日期選擇、select 選擇等等）被喚起，都會遇到一樣地問題。算法

解決方法: 不讓頁面滾動，而是讓主體部分本身滾動,主體部分高度設爲 100%，overflow:scroll

<body>
  <div class='warper'>
    <div class='main'></div>
  <div>
  <div class="fix-bottom"></div>
</body>

.warper {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 解決ios滑動不流暢問題 */
}
.fix-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

七、ios 鍵盤換行變爲搜索

input type="search"
input 外面套 form，必需要有 action，action="javascript:return true"
表單提交阻止默認提交事件

<form action="javascript:return true" @submit.prevent="formSubmit">
  <input type="search" placeholder="請輸入訴求名稱" id="search" />
</form>