前言
最近一段時(shí)間在做 H5 聊天項(xiàng)目，踩過其中一大坑：輸入框獲取焦點(diǎn)，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡單，其實(shí)不然。從實(shí)驗(yàn)過一些機(jī)型上看，發(fā)現(xiàn)主要存在以下問題：
下面就上述發(fā)現(xiàn)的問題，逐個(gè)探索一下解決方案。
獲知軟鍵盤彈起和收起狀態(tài)
獲知軟鍵盤的彈起還是收起狀態(tài)很重要，后面的兼容處理都要以此為前提。然而，H5 并沒有直接監(jiān)聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發(fā)頁面其他方面的表現(xiàn)間接監(jiān)聽，曲線救國。并且，在 IOS 和 Android 上的表現(xiàn)不盡相同。
IOS 軟鍵盤彈起表現(xiàn)
在 IOS 上，輸入框（input、textarea 或 富文本）獲取焦點(diǎn)，鍵盤彈起，頁面（webview）并沒有被壓縮，或者說高度（height）沒有改變，只是頁面（webview）整體往上滾了，且最大滾動(dòng)高度（scrollTop）為軟鍵盤高度。
Android 軟鍵盤彈起表現(xiàn)
同樣，在 Android 上，輸入框獲取焦點(diǎn)，鍵盤彈起，但是頁面（webview）高度會發(fā)生改變，一般來說，高度為可視區(qū)高度（原高度減去軟鍵盤高度），除了因?yàn)轫撁鎯?nèi)容被撐開可以產(chǎn)生滾動(dòng)，webview 本身不能滾動(dòng)。
IOS 軟鍵盤收起表現(xiàn)
觸發(fā)軟鍵盤上的“收起”按鈕鍵盤或者輸入框以外的頁面區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤收起。
Android 軟鍵盤收起表現(xiàn)
觸發(fā)輸入框以外的區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤收起。但是，觸發(fā)鍵盤上的收起按鈕鍵盤時(shí)，輸入框并不會失去焦點(diǎn)，同樣軟鍵盤收起。
監(jiān)聽軟鍵盤彈起和收起
綜合上面鍵盤彈起和收起在 IOS 和 Android 上的不同表現(xiàn)，我們可以分開進(jìn)行如下處理來監(jiān)聽軟鍵盤的彈起和收起：
// 判斷設(shè)備類型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 }}()// 監(jiān)聽輸入框的軟鍵盤彈起和收起事件function listenKeybord($input) { if (judgeDeviceType.isIOS) { // IOS 鍵盤彈起：IOS 和 Android 輸入框獲取焦點(diǎn)鍵盤彈起 $input.addEventListener('focus', function () { console.log('IOS 鍵盤彈起啦！'); // IOS 鍵盤彈起后操作 }, false) // IOS 鍵盤收起：IOS 點(diǎn)擊輸入框以外區(qū)域或點(diǎn)擊收起按鈕，輸入框都會失去焦點(diǎn)，鍵盤會收起， $input.addEventListener('blur', () => { console.log('IOS 鍵盤收起啦！'); // IOS 鍵盤收起后操作 }) } // Andriod 鍵盤收起：Andriod 鍵盤彈起或收起頁面高度會發(fā)生變化，以此為依據(jù)獲知鍵盤收起 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]);}彈起軟鍵盤始終讓輸入框滾動(dòng)到可視區(qū)
有時(shí)我們會做一個(gè)輸入表單，有很多輸入項(xiàng)，輸入框獲取焦點(diǎn)，彈起軟鍵盤。當(dāng)輸入框位于頁面下部位置時(shí)，在 IOS 上，會將 webview 整體往上滾一段距離，使得該獲取焦點(diǎn)的輸入框自動(dòng)處于可視區(qū)，而在 Android 則不會這樣，它只會改變頁面高度，而不會去滾動(dòng)到當(dāng)前焦點(diǎn)元素到可視區(qū)。
由于上面已經(jīng)實(shí)現(xiàn)監(jiān)聽 IOS 和 Android 鍵盤彈起和收起，在這里，只需在 Android 鍵盤彈起后，將焦點(diǎn)元素滾動(dòng)（scrollIntoView()）到可視區(qū)。查看效果，可以戳這里。
// 獲取到焦點(diǎn)元素滾動(dòng)到可視區(qū)function activeElementScrollIntoView(activeElement, delay) { var editable = activeElement.getAttribute('contenteditable') // 輸入框、textarea或富文本獲取焦點(diǎn)后沒有將該元素滾動(dòng)到可視區(qū) if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) { setTimeout(function () { activeElement.scrollIntoView(); }, delay) }}// ...// Android 鍵盤彈起后操作activeElementScrollIntoView($input, 1000);// ...喚起純數(shù)字軟鍵盤
上面的表單輸入框有要求輸入電話號碼，類似這樣就要彈出一個(gè)數(shù)字軟鍵盤了，既然說到了軟鍵盤兼容，在這里就安插一下。比較好的解決方案如下：
<p>請輸入手機(jī)號</p><input type="tel" novalidate="novalidate" pattern="[0-9]*" class="input">
兼容 IOS12 + V6.7.4+
如果你在用 IOS12 和 V6.7.4+版本的微信瀏覽器打開上面表單輸入的 demo ，就會驚奇的發(fā)現(xiàn)鍵盤收起后，原本被滾動(dòng)頂起的頁面并沒有回到底部位置，導(dǎo)致原來鍵盤彈起的位置“空”了。
其實(shí)這是 Apple 在 IOS 的 bug，會出現(xiàn)在所有的 Xcode10 打包的 IOS12 的設(shè)備上。微信官方已給出解決方案，只需在軟鍵盤收起后，將頁面（webview）滾回到窗口最底部位置（clientHeight位置）。修復(fù)后的上面表單輸入 demo 可以戳這里
console.log('IOS 鍵盤收起啦！');// 微信瀏覽器版本6.7.4+IOS12會出現(xiàn)鍵盤收起后，視圖被頂上去了沒有下來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) { window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));}兼容第三方輸入法
上面說了那么多，其實(shí)已經(jīng)把 H5 聊天輸入框的坑填了一大半了，接下來就先看下聊天輸入框的基本HTML結(jié)構(gòu)
<div class="chat__content"> <div> <p>一些聊天內(nèi)容1</p> </div> <!-- 省略幾千行聊天內(nèi)容 --></div><div class="input__content"> <div class="input" contenteditable="true"></div> <button>發(fā)送</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;}/* 省略一些樣式 */很簡單，就是劃分內(nèi)容區(qū)和輸入?yún)^(qū)，輸入?yún)^(qū)是絕對定位，按照上面表單輸入 demo 的做法，確實(shí)大部分 Android 瀏覽器是沒問題的，但是測試在 IOS 上，UC 瀏覽器配合原生輸入法和第三方輸入法（比如搜狗輸入法），輸入框都會被完全擋住；QQ 瀏覽器或微信瀏覽器，配合第三方輸入法，輸入框會被遮住一半；百度瀏覽器配合第三方輸入法輸入框也會被完全遮住。查看效果可以用相應(yīng)瀏覽器中訪問這里。
在 UC 瀏覽器上，軟鍵盤彈起后，瀏覽器上面的標(biāo)題欄高度就有個(gè)高度變小延時(shí)動(dòng)態(tài)效果，這樣導(dǎo)致 webview 往下滾了一點(diǎn)，底部輸入框滾到了非可視區(qū)。
而對于第三方輸入法，猜測本身是由于輸入法面板彈起后高度計(jì)算有誤，導(dǎo)致 webview 初始滾動(dòng)定位有誤。其實(shí)這兩點(diǎn)都是 webview 滾動(dòng)不到位造成的。可以讓軟鍵盤彈起后，讓焦點(diǎn)元素再次滾到可視區(qū)，強(qiáng)迫 webview 滾到位。
console.log('Android 鍵盤彈起啦！');activeElementScrollIntoView($input, 1000);兼容 Android 小米瀏覽器的 Hack 方案
在 Android 的小米瀏覽器上，應(yīng)用上面的方案，發(fā)現(xiàn)聊天輸入框還是被遮擋得嚴(yán)嚴(yán)實(shí)實(shí)，scrollIntoView() 仍然紋絲不動(dòng)。所以猜測，其實(shí)是滾到底了，軟鍵盤彈起，頁面實(shí)現(xiàn)高度大于可視區(qū)高度，這樣只能在軟鍵盤彈起后，強(qiáng)行增加頁面高度，使輸入框可以顯示出來。綜合上面兼容第三方輸入法，查看效果可以戳這里
// Andriod 鍵盤收起：Andriod 鍵盤彈起或收起頁面高度會發(fā)生變化，以此為依據(jù)獲知鍵盤收起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 鍵盤收起啦！'); // 修復(fù)小米瀏覽器下，輸入框依舊被輸入法遮擋問題 if (judgeDeviceType.isMiuiBrowser) { document.body.style.marginBottom = '0px'; } } else { console.log('Android 鍵盤彈起啦！'); // 修復(fù)小米瀏覽器下，輸入框依舊被輸入法遮擋問題 if (judgeDeviceType.isMiuiBrowser) { document.body.style.marginBottom = '40px'; } activeElementScrollIntoView($input, 1000); } originHeight = resizeHeight; }, false)}總結(jié)
H5 端前路漫漫，坑很多，需要不斷嘗試。了解軟鍵盤彈起頁面在 IOS 和 Android 上的表現(xiàn)差異是前提，其次是將焦點(diǎn)元素滾動(dòng)到可視區(qū)，同時(shí)要考慮到第三方輸入法和某些瀏覽器上的差別。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
