編者按：本文轉載自wuwhs的segmentfault專欄 https://mp.weixin.qq.com/s/EkB5yNJMmSpCj6h87-VZmw

前言

最近一段時間在做 H5 聊天項目，踩過其中一大坑：輸入框擷取焦點，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明确，看似很簡單，其實不然。從實驗過一些機型上看，發現主要存在以下問題：

在 Android 和 IOS 上，獲知軟鍵盤彈起和收起狀态存在差異，且頁面 webview 表現不同。
在IOS12 上，微信版本 v6.7.4 及以上，輸入框擷取焦點，鍵盤彈起，頁面（webview）整體往上滾動，當鍵盤收起後，不回到原位，導緻鍵盤原來所在位置是空白的。
在 IOS 上，使用第三方輸入法，高度計算存在偏差，導緻在有些輸入法彈起，将輸入框擋住一部分。

在有些浏覽器上使用一些操作技巧，還是存在輸入框被輸入法遮擋。

下面就上述發現的問題，逐個探索一下解決方案。

獲知軟鍵盤彈起和收起狀态

獲知軟鍵盤的彈起還是收起狀态很重要，後面的相容處理都要以此為前提。然而，H5 并沒有直接監聽軟鍵盤的原生事件，隻能通過軟鍵盤彈起或收起，引發頁面其他方面的表現間接監聽，曲線救國。并且，在 IOS 和 Android 上的表現不盡相同。

IOS 軟鍵盤彈起表現

在 IOS 上，輸入框（input、textarea 或富文本）擷取焦點，鍵盤彈起，頁面（webview）并沒有被壓縮，或者說高度（height）沒有改變，隻是頁面（webview）整體往上滾了，且最大滾動高度（scrollTop）為軟鍵盤高度。

Android 軟鍵盤彈起表現

同樣，在 Android 上，輸入框擷取焦點，鍵盤彈起，但是頁面（webview）高度會發生改變，一般來說，高度為可視區高度（原高度減去軟鍵盤高度），除了因為頁面内容被撐開可以産生滾動，webview 本身不能滾動。

IOS 軟鍵盤收起表現

觸發軟鍵盤上的“收起”按鈕鍵盤或者輸入框以外的頁面區域時，輸入框失去焦點，軟鍵盤收起。

Android 軟鍵盤收起表現

觸發輸入框以外的區域時，輸入框失去焦點，軟鍵盤收起。但是，觸發鍵盤上的收起按鈕鍵盤時，輸入框并不會失去焦點，同樣軟鍵盤收起。

可能這些是你想要的H5軟鍵盤相容方案前言獲知軟鍵盤彈起和收起狀态相容 IOS12 + V6.7.4+相容第三方輸入法相容 Android 小米浏覽器的 Hack 方案總結

監聽軟鍵盤彈起和收起

綜合上面鍵盤彈起和收起在 IOS 和 Android 上的不同表現，我們可以分開進行如下處理來監聽軟鍵盤的彈起和收起：

在 IOS 上，監聽輸入框的 focus 事件來獲知軟鍵盤彈起，監聽輸入框的 blur 事件獲知軟鍵盤收起。
在 Android 上，監聽 webview 高度會變化，高度變小獲知軟鍵盤彈起，否則軟鍵盤收起。

// 判斷裝置類型
var judgeDeviceType = function () {
  var ua = window.navigator.userAgent.toLocaleLowerCase();
  var isIOS = /iphone|ipad|ipod/.test(ua);
  var isAndroid = /android/.test(ua);

  return {
    isIOS: isIOS,
    isAndroid: isAndroid
  }
}()

// 監聽輸入框的軟鍵盤彈起和收起事件
function listenKeybord($input) {
  if (judgeDeviceType.isIOS) {
    // IOS 鍵盤彈起：IOS 和 Android 輸入框擷取焦點鍵盤彈起
    $input.addEventListener('focus', function () {
      console.log('IOS 鍵盤彈起啦！');
      // IOS 鍵盤彈起後操作
    }, false)

    // IOS 鍵盤收起：IOS 點選輸入框以外區域或點選收起按鈕，輸入框都會失去焦點，鍵盤會收起，
    $input.addEventListener('blur', () => {
      console.log('IOS 鍵盤收起啦！');
      // IOS 鍵盤收起後操作
    })
  }

  // Andriod 鍵盤收起：Andriod 鍵盤彈起或收起頁面高度會發生變化，以此為依據獲知鍵盤收起
  if (judgeDeviceType.isAndroid) {
    var originHeight = document.documentElement.clientHeight || document.body.clientHeight;

    window.addEventListener('resize', function () {
      var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
      if (originHeight < resizeHeight) {
        console.log('Android 鍵盤收起啦！');
        // Android 鍵盤收起後操作
      } else {
        console.log('Android 鍵盤彈起啦！');
        // Android 鍵盤彈起後操作
      }

      originHeight = resizeHeight;
    }, false)
  }
}

var $inputs = document.querySelectorAll('.input');

for (var i = 0; i < $inputs.length; i++) {
  listenKeybord($inputs[i]);
}

彈起軟鍵盤始終讓輸入框滾動到可視區

有時我們會做一個輸入表單，有很多輸入項，輸入框擷取焦點，彈起軟鍵盤。當輸入框位于頁面下部位置時，在 IOS 上，會将 webview 整體往上滾一段距離，使得該擷取焦點的輸入框自動處于可視區，而在 Android 則不會這樣，它隻會改變頁面高度，而不會去滾動到目前焦點元素到可視區。

由于上面已經實作監聽 IOS 和 Android 鍵盤彈起和收起，在這裡，隻需在 Android 鍵盤彈起後，将焦點元素滾動（scrollIntoView()）到可視區。檢視效果，可以戳這裡1。

// 擷取到焦點元素滾動到可視區
function activeElementScrollIntoView(activeElement, delay) {
  var editable = activeElement.getAttribute('contenteditable')

  // 輸入框、textarea或富文本擷取焦點後沒有将該元素滾動到可視區
  if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {
    setTimeout(function () {
      activeElement.scrollIntoView();
    }, delay)
  }
}

// ...
// Android 鍵盤彈起後操作
activeElementScrollIntoView($input, 1000);
// ...

喚起純數字軟鍵盤

上面的表單輸入框有要求輸入電話号碼，類似這樣就要彈出一個數字軟鍵盤了，既然說到了軟鍵盤相容，在這裡就安插一下。比較好的解決方案如下：

<p>請輸入手機号</p>
<input type="tel" novalidate="novalidate" pattern="[0-9]*" class="input">

type=“tel”，是 HTML5 的一個屬性，表示輸入框類型為電話号碼，在 Android 和 IOS 上表現差不多，都會有數字鍵盤，但是也會有字母，略顯多餘。
pattern="[0-9]"， pattern 用于驗證表單輸入的内容，通常 HTML5 的 type 屬性，比如 email、tel、number、data 類、url 等，已經自帶了簡單的資料格式驗證功能了，加上 pattern 後，前端部分的驗證更加簡單高效了。IOS 中，隻有 [0-9]* 才可以調起九宮格數字鍵盤，\d 無效，Android 4.4 以下（包括X5核心），兩者都調起數字鍵盤。
novalidate=“novalidate”，novalidate 屬性規定當送出表單時不對其進行驗證，由于 pattern 校驗相容性2不好，可以不讓其校驗，隻讓其喚起純數字鍵盤，校驗工作由 js 去做。

可能這些是你想要的H5軟鍵盤相容方案前言獲知軟鍵盤彈起和收起狀态相容 IOS12 + V6.7.4+相容第三方輸入法相容 Android 小米浏覽器的 Hack 方案總結

相容 IOS12 + V6.7.4+

如果你在用 IOS12 和 V6.7.4+版本的微信浏覽器打開上面表單輸入的 demo ，就會驚奇的發現鍵盤收起後，原本被滾動頂起的頁面并沒有回到底部位置，導緻原來鍵盤彈起的位置“空”了。

可能這些是你想要的H5軟鍵盤相容方案前言獲知軟鍵盤彈起和收起狀态相容 IOS12 + V6.7.4+相容第三方輸入法相容 Android 小米浏覽器的 Hack 方案總結

其實這是 Apple 在 IOS 的 bug，會出現在所有的 Xcode10 打包的 IOS12 的裝置上。微信官方已給出解決方案3，隻需在軟鍵盤收起後，将頁面（webview）滾回到視窗最底部位置（clientHeight位置）。修複後的上面表單輸入 demo 可以戳這裡

console.log('IOS 鍵盤收起啦！');
// IOS 鍵盤收起後操作
// 微信浏覽器版本6.7.4+IOS12會出現鍵盤收起後，視圖被頂上去了沒有下來
var wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
if (!wechatInfo) return;

var wechatVersion = wechatInfo[1];
var version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);

if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
  setTimeout(function () {
    window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
  })
}

相容第三方輸入法

上面說了那麼多，其實已經把 H5 聊天輸入框的坑填了一大半了，接下來就先看下聊天輸入框的基本HTML結構

<div class="chat__content">
  <div>
    <p>一些聊天内容1</p>
  </div>
  <!-- 省略幾千行聊天内容 -->
</div>
<div class="input__content">
  <div class="input" contenteditable="true"></div>
  <button>發送</button>
</div>

樣式

/* 省略一些樣式 */
.chat__content {
  height: calc(100% - 40px);
  margin-bottom: 40px;
  overflow-y: auto;
  overflow-x: hidden;
}

.input__content {
  display: flex;
  height: 40px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
}
/* 省略一些樣式 */

很簡單，就是劃分内容區和輸入區，輸入區是絕對定位，按照上面表單輸入 demo 的做法，确實大部分 Android 浏覽器是沒問題的，但是測試在 IOS 上，UC 浏覽器配合原生輸入法和第三方輸入法（比如搜狗輸入法），輸入框都會被完全擋住；QQ 浏覽器或微信浏覽器，配合第三方輸入法，輸入框會被遮住一半；百度浏覽器配合第三方輸入法輸入框也會被完全遮住。檢視效果可以用相應浏覽器中通路這裡5。

可能這些是你想要的H5軟鍵盤相容方案前言獲知軟鍵盤彈起和收起狀态相容 IOS12 + V6.7.4+相容第三方輸入法相容 Android 小米浏覽器的 Hack 方案總結

在 UC 浏覽器上，軟鍵盤彈起後，浏覽器上面的标題欄高度就有個高度變小延時動态效果，這樣導緻 webview 往下滾了一點，底部輸入框滾到了非可視區。

而對于第三方輸入法，猜測本身是由于輸入法面闆彈起後高度計算有誤，導緻 webview 初始滾動定位有誤。其實這兩點都是 webview 滾動不到位造成的。可以讓軟鍵盤彈起後，讓焦點元素再次滾到可視區，強迫 webview 滾到位。

console.log('Android 鍵盤彈起啦！');
// Android 鍵盤彈起後操作
activeElementScrollIntoView($input, 1000);

相容 Android 小米浏覽器的 Hack 方案

在 Android 的小米浏覽器上，應用上面的方案，發現聊天輸入框還是被遮擋得嚴嚴實實，scrollIntoView() 仍然紋絲不動。是以猜測，其實是滾到底了，軟鍵盤彈起，頁面實作高度大于可視區高度，這樣隻能在軟鍵盤彈起後，強行增加頁面高度，使輸入框可以顯示出來。綜合上面相容第三方輸入法，檢視效果可以戳這裡6

// Andriod 鍵盤收起：Andriod 鍵盤彈起或收起頁面高度會發生變化，以此為依據獲知鍵盤收起
if (judgeDeviceType.isAndroid) {
  var originHeight = document.documentElement.clientHeight || document.body.clientHeight;

  window.addEventListener('resize', function () {
    var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (originHeight < resizeHeight) {
      console.log('Android 鍵盤收起啦！');
      // Android 鍵盤收起後操作
      // 修複小米浏覽器下，輸入框依舊被輸入法遮擋問題
      if (judgeDeviceType.isMiuiBrowser) {
        document.body.style.marginBottom = '0px';
      }
    } else {
      console.log('Android 鍵盤彈起啦！');
      // Android 鍵盤彈起後操作
      // 修複小米浏覽器下，輸入框依舊被輸入法遮擋問題
      if (judgeDeviceType.isMiuiBrowser) {
        document.body.style.marginBottom = '40px';
      }
      activeElementScrollIntoView($input, 1000);
    }

    originHeight = resizeHeight;
  }, false)
}

總結

H5 端前路漫漫，坑很多，需要不斷嘗試。了解軟鍵盤彈起頁面在 IOS 和 Android 上的表現差異是前提，其次是将焦點元素滾動到可視區，同時要考慮到第三方輸入法和某些浏覽器上的差别。總結肯定不全面，歡迎大家指正哈，完~

文中連結

https://wuwhs.github.io/demo/keyboard-compatible/input.html

https://www.caniuse.com/#search=pattern

https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800

https://wuwhs.github.io/demo/keyboard-compatible/input-fix-ios12-wx6.7.4.html

https://wuwhs.github.io/demo/keyboard-compatible/chat.html

https://wuwhs.github.io/demo/keyboard-compatible/chat-fix-third-keyboard.html

可能這些是你想要的H5軟鍵盤相容方案前言獲知軟鍵盤彈起和收起狀态相容 IOS12 + V6.7.4+相容第三方輸入法相容 Android 小米浏覽器的 Hack 方案總結

前言

獲知軟鍵盤彈起和收起狀态

IOS 軟鍵盤彈起表現

Android 軟鍵盤彈起表現

IOS 軟鍵盤收起表現

Android 軟鍵盤收起表現

監聽軟鍵盤彈起和收起

彈起軟鍵盤始終讓輸入框滾動到可視區

喚起純數字軟鍵盤

相容 IOS12 + V6.7.4+

相容第三方輸入法

相容 Android 小米浏覽器的 Hack 方案

總結

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條