總結幾個移動端H5軟鍵盤的大坑及其解決方案

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

解決方法：可以通過監聽移動端軟鍵盤彈起

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

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

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

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)
  }
})
複製程式碼

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

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

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);
  })
複製程式碼

3、onkeyUp 和 onKeydown 相容性問題

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

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

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

定位找到問題是 fastclick.js 對 ios12 的相容性，可在 fastclick.js 原始碼或者 main.js 做以下修改

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()
  }
}
複製程式碼

5、fastclick 導致下拉框焦點衝突

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

根本原因是 Fastclick 導致 ios 下多個 select ，點選某一個，焦點不停變換的 bug。修改原始碼，在 onTouchStart 事件內判斷裝置是否為 ios，再判斷當前 nodeName 是否為 select，如果是 return false 去阻止 fastClick 執行其他事件。

github 原始碼地址：fastclick.js

//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()
}
複製程式碼

6、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%;
}
複製程式碼

7、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>
複製程式碼