js移動端---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 軟鍵盤收起表現

觸發輸入框之外的區域時，輸入框失去焦點，軟鍵盤收起。可是，觸發鍵盤上的收起按鈕鍵盤時，輸入框並不會失去焦點，一樣軟鍵盤收起。

監聽軟鍵盤彈起和收起

綜合上面鍵盤彈起和收起在 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()）到可視區。查看效果，能夠戳這裏。

// 獲取到焦點元素滾動到可視區
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); // ...

 

兼容 IOS12 +

在iphoneX上測試，發現鍵盤收起後，本來被滾動頂起的頁面並無回到底部位置，致使原來鍵盤彈起的位置「空」了。

解決方案：

只需在軟鍵盤收起後，將頁面（webview）滾回到窗口最底部位置（clientHeight位置）。

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)); }) }

 

來源：https://segmentfault.com/a/1190000018959389