日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

前言

創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為同安等服務(wù)建站，同安等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為同安企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

最近一段時(shí)間在做 H5 聊天項(xiàng)目，踩過其中一大坑：輸入框獲取焦點(diǎn)，軟鍵盤彈起，要求輸入框吸附(或頂)在輸入法框上。需求很明確，看似很簡單，其實(shí)不然。從實(shí)驗(yàn)過一些機(jī)型上看，發(fā)現(xiàn)主要存在以下問題：

• 在 Android 和 IOS 上，獲知軟鍵盤彈起和收起狀態(tài)存在差異，且頁面 webview 表現(xiàn)不同。
• 在IOS12 上，微信版本 v6.7.4 及以上，輸入框獲取焦點(diǎn)，鍵盤彈起，頁面(webview)整體往上滾動，當(dāng)鍵盤收起后，不回到原位，導(dǎo)致鍵盤原來所在位置是空白的。
• 在 IOS 上，使用第三方輸入法，高度計(jì)算存在偏差，導(dǎo)致在有些輸入法彈起，將輸入框擋住一部分。
• 在有些瀏覽器上使用一些操作技巧，還是存在輸入框被輸入法遮擋。

下面就上述發(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)整體往上滾了，且***滾動高度(scrollTop)為軟鍵盤高度。

Android 軟鍵盤彈起表現(xiàn)

同樣，在 Android 上，輸入框獲取焦點(diǎn)，鍵盤彈起，但是頁面(webview)高度會發(fā)生改變，一般來說，高度為可視區(qū)高度(原高度減去軟鍵盤高度)，除了因?yàn)轫撁鎯?nèi)容被撐開可以產(chǎn)生滾動，webview 本身不能滾動。

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)聽軟鍵盤的彈起和收起：

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

 
 
 
 

  
  
  
  
// 判斷設(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]);  
  
  
  
  
}  
 
 
 
 

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

有時(shí)我們會做一個(gè)輸入表單，有很多輸入項(xiàng)，輸入框獲取焦點(diǎn)，彈起軟鍵盤。當(dāng)輸入框位于頁面下部位置時(shí)，在 IOS 上，會將 webview 整體往上滾一段距離，使得該獲取焦點(diǎn)的輸入框自動處于可視區(qū)，而在 Android 則不會這樣，它只會改變頁面高度，而不會去滾動到當(dāng)前焦點(diǎn)元素到可視區(qū)。

由于上面已經(jīng)實(shí)現(xiàn)監(jiān)聽 IOS 和 Android 鍵盤彈起和收起，在這里，只需在 Android 鍵盤彈起后，將焦點(diǎn)元素滾動(scrollIntoView())到可視區(qū)。查看效果，可以戳這里。

 
 
 
 

  
  
  
  
// 獲取到焦點(diǎn)元素滾動到可視區(qū)  
  
  
  
  
function activeElementScrollIntoView(activeElement, delay) {  
  
  
  
  
var editable = activeElement.getAttribute('contenteditable')  
  
  
  
  
// 輸入框、textarea或富文本獲取焦點(diǎn)后沒有將該元素滾動到可視區(qū)  
  
  
  
  
if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {  
  
  
  
  
setTimeout(function () {  
  
  
  
  
activeElement.scrollIntoView();  
  
  
  
  
}, delay)  
  
  
  
  
}  
  
  
  
  
}  
  
  
  
  
// ...  
  
  
  
  
// Android 鍵盤彈起后操作  
  
  
  
  
activeElementScrollIntoView($input, 1000);  
  
  
  
  
// ...  
 
 
 
 

喚起純數(shù)字軟鍵盤

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

 
 
 
 

  
  
  
  
請輸入手機(jī)號
  
  
  
  
  
  
 
 
 
 

• type="tel"， 是 HTML5 的一個(gè)屬性，表示輸入框類型為電話號碼，在 Android 和 IOS 上表現(xiàn)差不多，都會有數(shù)字鍵盤，但是也會有字母，略顯多余。
• pattern="[0-9]"， pattern 用于驗(yàn)證表單輸入的內(nèi)容，通常 HTML5 的 type 屬性，比如 email、tel、number、data 類、url 等，已經(jīng)自帶了簡單的數(shù)據(jù)格式驗(yàn)證功能了，加上 pattern 后，前端部分的驗(yàn)證更加簡單高效了。IOS 中，只有 [0-9]\* 才可以調(diào)起九宮格數(shù)字鍵盤，\d 無效，Android 4.4 以下(包括X5內(nèi)核)，兩者都調(diào)起數(shù)字鍵盤。
• novalidate="novalidate"，novalidate 屬性規(guī)定當(dāng)提交表單時(shí)不對其進(jìn)行驗(yàn)證，由于 pattern 校驗(yàn)兼容性不好，可以不讓其校驗(yàn)，只讓其喚起純數(shù)字鍵盤，校驗(yàn)工作由 js 去做。

兼容 IOS12 + V6.7.4+

如果你在用 IOS12 和 V6.7.4+版本的微信瀏覽器打開上面表單輸入的 demo ，就會驚奇的發(fā)現(xiàn)鍵盤收起后，原本被滾動頂起的頁面并沒有回到底部位置，導(dǎo)致原來鍵盤彈起的位置“空”了。

其實(shí)這是 Apple 在 IOS 的 bug，會出現(xiàn)在所有的 Xcode10 打包的 IOS12 的設(shè)備上。微信官方已給出解決方案，只需在軟鍵盤收起后，將頁面(webview)滾回到窗口***部位置(clientHeight位置)。修復(fù)后的上面表單輸入 demo 可以戳這里：

 
 
 
 

  
  
  
  
console.log('IOS 鍵盤收起啦!');  
  
  
  
  
// 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)。

 
 
 
 

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    
一些聊天內(nèi)容1