日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
可能這些是你想要的H5軟鍵盤(pán)兼容方案

前言

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

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

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

下面就上述發(fā)現(xiàn)的問(wèn)題，逐個(gè)探索一下解決方案。

獲知軟鍵盤(pán)彈起和收起狀態(tài)

獲知軟鍵盤(pán)的彈起還是收起狀態(tài)很重要，后面的兼容處理都要以此為前提。然而，H5 并沒(méi)有直接監(jiān)聽(tīng)軟鍵盤(pán)的原生事件，只能通過(guò)軟鍵盤(pán)彈起或收起，引發(fā)頁(yè)面其他方面的表現(xiàn)間接監(jiān)聽(tīng)，曲線救國(guó)。并且，在 IOS 和 Android 上的表現(xiàn)不盡相同。

IOS 軟鍵盤(pán)彈起表現(xiàn)

在 IOS 上，輸入框(input、textarea 或 富文本)獲取焦點(diǎn)，鍵盤(pán)彈起，頁(yè)面(webview)并沒(méi)有被壓縮，或者說(shuō)高度(height)沒(méi)有改變，只是頁(yè)面(webview)整體往上滾了，且***滾動(dòng)高度(scrollTop)為軟鍵盤(pán)高度。

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

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

IOS 軟鍵盤(pán)收起表現(xiàn)

觸發(fā)軟鍵盤(pán)上的“收起”按鈕鍵盤(pán)或者輸入框以外的頁(yè)面區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤(pán)收起。

Android 軟鍵盤(pán)收起表現(xiàn)

觸發(fā)輸入框以外的區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤(pán)收起。但是，觸發(fā)鍵盤(pán)上的收起按鈕鍵盤(pán)時(shí)，輸入框并不會(huì)失去焦點(diǎn)，同樣軟鍵盤(pán)收起。

監(jiān)聽(tīng)軟鍵盤(pán)彈起和收起

綜合上面鍵盤(pán)彈起和收起在 IOS 和 Android 上的不同表現(xiàn)，我們可以分開(kāi)進(jìn)行如下處理來(lái)監(jiān)聽(tīng)軟鍵盤(pán)的彈起和收起：

  • 在 IOS 上，監(jiān)聽(tīng)輸入框的 focus 事件來(lái)獲知軟鍵盤(pán)彈起，監(jiān)聽(tīng)輸入框的 blur 事件獲知軟鍵盤(pán)收起。
  • 在 Android 上，監(jiān)聽(tīng) webview 高度會(huì)變化，高度變小獲知軟鍵盤(pán)彈起，否則軟鍵盤(pán)收起。 
 
 
 
 
    
  
  
  
  
  1. // 判斷設(shè)備類型  
    2.   
  
  
  
  2. var judgeDeviceType = function () {  
    3.   
  
  
  
  3. var ua = window.navigator.userAgent.toLocaleLowerCase();  
    4.   
  
  
  
  4. var isIOS = /iphone|ipad|ipod/.test(ua);  
    5.   
  
  
  
  5. var isAndroid = /android/.test(ua);  
    6.   
  
  
  
  6. return {  
    7.   
  
  
  
  7. isIOS: isIOS,  
    8.   
  
  
  
  8. isAndroid: isAndroid  
    9.   
  
  
  
  9. }  
    10.   
  
  
  
  10. }()  
    11.   
  
  
  
  11. // 監(jiān)聽(tīng)輸入框的軟鍵盤(pán)彈起和收起事件  
    12.   
  
  
  
  12. function listenKeybord($input) {  
    13.   
  
  
  
  13. if (judgeDeviceType.isIOS) {  
    14.   
  
  
  
  14. // IOS 鍵盤(pán)彈起：IOS 和 Android 輸入框獲取焦點(diǎn)鍵盤(pán)彈起  
    15.   
  
  
  
  15. $input.addEventListener('focus', function () {  
    16.   
  
  
  
  16. console.log('IOS 鍵盤(pán)彈起啦!');  
    17.   
  
  
  
  17. // IOS 鍵盤(pán)彈起后操作  
    18.   
  
  
  
  18. }, false)  
    19.   
  
  
  
  19. // IOS 鍵盤(pán)收起：IOS 點(diǎn)擊輸入框以外區(qū)域或點(diǎn)擊收起按鈕，輸入框都會(huì)失去焦點(diǎn)，鍵盤(pán)會(huì)收起，  
    20.   
  
  
  
  20. $input.addEventListener('blur', () => {  
    21.   
  
  
  
  21. console.log('IOS 鍵盤(pán)收起啦!');  
    22.   
  
  
  
  22. // IOS 鍵盤(pán)收起后操作  
    23.   
  
  
  
  23. })  
    24.   
  
  
  
  24. }  
    25.   
  
  
  
  25. // Andriod 鍵盤(pán)收起：Andriod 鍵盤(pán)彈起或收起頁(yè)面高度會(huì)發(fā)生變化，以此為依據(jù)獲知鍵盤(pán)收起  
    26.   
  
  
  
  26. if (judgeDeviceType.isAndroid) {  
    27.   
  
  
  
  27. var originHeight = document.documentElement.clientHeight || document.body.clientHeight;  
    28.   
  
  
  
  28. window.addEventListener('resize', function () {  
    29.   
  
  
  
  29. var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;  
    30.   
  
  
  
  30. if (originHeight < resizeHeight) {  
    31.   
  
  
  
  31. console.log('Android 鍵盤(pán)收起啦!');  
    32.   
  
  
  
  32. // Android 鍵盤(pán)收起后操作  
    33.   
  
  
  
  33. } else {  
    34.   
  
  
  
  34. console.log('Android 鍵盤(pán)彈起啦!');  
    35.   
  
  
  
  35. // Android 鍵盤(pán)彈起后操作  
    36.   
  
  
  
  36. }  
    37.   
  
  
  
  37. originHeight = resizeHeight;  
    38.   
  
  
  
  38. }, false)  
    39.   
  
  
  
  39. }  
    40.   
  
  
  
  40. }  
    41.   
  
  
  
  41. var $inputs = document.querySelectorAll('.input');  
    42.   
  
  
  
  42. for (var i = 0; i < $inputs.length; i++) {  
    43.   
  
  
  
  43. listenKeybord($inputs[i]);  
    44.   
  
  
  
  44. }  
    45.

彈起軟鍵盤(pán)始終讓輸入框滾動(dòng)到可視區(qū)

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

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

 
 
 
 
    
  
  
  
  
  1. // 獲取到焦點(diǎn)元素滾動(dòng)到可視區(qū)  
    2.   
  
  
  
  2. function activeElementScrollIntoView(activeElement, delay) {  
    3.   
  
  
  
  3. var editable = activeElement.getAttribute('contenteditable')  
    4.   
  
  
  
  4. // 輸入框、textarea或富文本獲取焦點(diǎn)后沒(méi)有將該元素滾動(dòng)到可視區(qū)  
    5.   
  
  
  
  5. if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {  
    6.   
  
  
  
  6. setTimeout(function () {  
    7.   
  
  
  
  7. activeElement.scrollIntoView();  
    8.   
  
  
  
  8. }, delay)  
    9.   
  
  
  
  9. }  
    10.   
  
  
  
  10. }  
    11.   
  
  
  
  11. // ...  
    12.   
  
  
  
  12. // Android 鍵盤(pán)彈起后操作  
    13.   
  
  
  
  13. activeElementScrollIntoView($input, 1000);  
    14.   
  
  
  
  14. // ...  
    15.

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

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

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

兼容 IOS12 + V6.7.4+

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

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

 
 
 
 
    
  
  
  
  
  1. console.log('IOS 鍵盤(pán)收起啦!');  
    2.   
  
  
  
  2. // IOS 鍵盤(pán)收起后操作  
    3.   
  
  
  
  3. // 微信瀏覽器版本6.7.4+IOS12會(huì)出現(xiàn)鍵盤(pán)收起后，視圖被頂上去了沒(méi)有下來(lái)  
    4.   
  
  
  
  4. var wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);  
    5.   
  
  
  
  5. if (!wechatInfo) return;  
    6.   
  
  
  
  6. var wechatVersion = wechatInfo[1];  
    7.   
  
  
  
  7. var version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);  
    8.   
  
  
  
  8. if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {  
    9.   
  
  
  
  9. window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));  
    10.   
  
  
  
  10. }  
    11.

兼容第三方輸入法

上面說(shuō)了那么多，其實(shí)已經(jīng)把 H5 聊天輸入框的坑填了一大半了，接下來(lái)就先看下聊天輸入框的基本HTML結(jié)構(gòu)。

 
 
 
 
    
  
  
  
  
  1.   
    2.   
  
  
  
  2.   
      
    3.   
  
  
  
  3.     
    一些聊天內(nèi)容1
      
    4.   
  
  
  
  4.   
  
  •     
  •   
  •   
  •   
    •   
  •     
  •  

    樣式

     
 
 
 
      
  
  
  
  
    1. /* 省略一些樣式 */  
      2.   
  
  
  
    2. .chat__content {  
      3.   
  
  
  
    3. height: calc(100% - 40px);  
      4.   
  
  
  
    4. margin-bottom: 40px;  
      5.   
  
  
  
    5. overflow-y: auto;  
      6.   
  
  
  
    6. overflow-x: hidden;  
      7.   
  
  
  
    7. }  
      8.   
  
  
  
    8. .input__content {  
      9.   
  
  
  
    9. display: flex;  
      10.   
  
  
  
    10. height: 40px;  
      11.   
  
  
  
    11. position: absolute;  
      12.   
  
  
  
    12. left: 0;  
      13.   
  
  
  
    13. right: 0;  
      14.   
  
  
  
    14. bottom: 0;  
      15.   
  
  
  
    15. align-items: center;  
      16.   
  
  
  
    16. }  
      17.   
  
  
  
    17. /* 省略一些樣式 */  
      18.

    很簡(jiǎn)單，就是劃分內(nèi)容區(qū)和輸入?yún)^(qū)，輸入?yún)^(qū)是絕對(duì)定位，按照上面表單輸入 demo 的做法，確實(shí)大部分 Android 瀏覽器是沒(méi)問(wèn)題的，但是測(cè)試在 IOS 上，UC 瀏覽器配合原生輸入法和第三方輸入法(比如搜狗輸入法)，輸入框都會(huì)被完全擋住;QQ 瀏覽器或微信瀏覽器，配合第三方輸入法，輸入框會(huì)被遮住一半;百度瀏覽器配合第三方輸入法輸入框也會(huì)被完全遮住。查看效果可以用相應(yīng)瀏覽器中訪問(wèn)這里。

    在 UC 瀏覽器上，軟鍵盤(pán)彈起后，瀏覽器上面的標(biāo)題欄高度就有個(gè)高度變小延時(shí)動(dòng)態(tài)效果，這樣導(dǎo)致 webview 往下滾了一點(diǎn)，底部輸入框滾到了非可視區(qū)。

    而對(duì)于第三方輸入法，猜測(cè)本身是由于輸入法面板彈起后高度計(jì)算有誤，導(dǎo)致 webview 初始滾動(dòng)定位有誤。其實(shí)這兩點(diǎn)都是 webview 滾動(dòng)不到位造成的?？梢宰屲涙I盤(pán)彈起后，讓焦點(diǎn)元素再次滾到可視區(qū)，強(qiáng)迫 webview 滾到位。

     
 
 
 
      
  
  
  
  
    1. console.log('Android 鍵盤(pán)彈起啦!');  
      2.   
  
  
  
    2. // Android 鍵盤(pán)彈起后操作  
      3.   
  
  
  
    3. activeElementScrollIntoView($input, 1000);  
      4.

    兼容 Android 小米瀏覽器的 Hack 方案

    在 Android 的小米瀏覽器上，應(yīng)用上面的方案，發(fā)現(xiàn)聊天輸入框還是被遮擋得嚴(yán)嚴(yán)實(shí)實(shí)，scrollIntoView() 仍然紋絲不動(dòng)。所以猜測(cè)，其實(shí)是滾到底了，軟鍵盤(pán)彈起，頁(yè)面實(shí)現(xiàn)高度大于可視區(qū)高度，這樣只能在軟鍵盤(pán)彈起后，強(qiáng)行增加頁(yè)面高度，使輸入框可以顯示出來(lái)。綜合上面兼容第三方輸入法，查看效果可以戳這里：

     
 
 
 
      
  
  
  
  
    1. // Andriod 鍵盤(pán)收起：Andriod 鍵盤(pán)彈起或收起頁(yè)面高度會(huì)發(fā)生變化，以此為依據(jù)獲知鍵盤(pán)收起  
      2.   
  
  
  
    2. if (judgeDeviceType.isAndroid) {  
      3.   
  
  
  
    3. var originHeight = document.documentElement.clientHeight || document.body.clientHeight;  
      4.   
  
  
  
    4. window.addEventListener('resize', function () {  
      5.   
  
  
  
    5. var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;  
      6.   
  
  
  
    6. if (originHeight < resizeHeight) {  
      7.   
  
  
  
    7. console.log('Android 鍵盤(pán)收起啦!');  
      8.   
  
  
  
    8. // Android 鍵盤(pán)收起后操作  
      9.   
  
  
  
    9. // 修復(fù)小米瀏覽器下，輸入框依舊被輸入法遮擋問(wèn)題  
      10.   
  
  
  
    10. if (judgeDeviceType.isMiuiBrowser) {  
      11.   
  
  
  
    11. document.body.style.marginBottom = '0px';  
      12.   
  
  
  
    12. }  
      13.   
  
  
  
    13. } else {  
      14.   
  
  
  
    14. console.log('Android 鍵盤(pán)彈起啦!');  
      15.   
  
  
  
    15. // Android 鍵盤(pán)彈起后操作  
      16.   
  
  
  
    16. // 修復(fù)小米瀏覽器下，輸入框依舊被輸入法遮擋問(wèn)題  
      17.   
  
  
  
    17. if (judgeDeviceType.isMiuiBrowser) {  
      18.   
  
  
  
    18. document.body.style.marginBottom = '40px';  
      19.   
  
  
  
    19. }  
      20.   
  
  
  
    20. activeElementScrollIntoView($input, 1000);  
      21.   
  
  
  
    21. }  
      22.   
  
  
  
    22. originHeight = resizeHeight;  
      23.   
  
  
  
    23. }, false)  
      24.   
  
  
  
    24. }  
      25.

    總結(jié)

    H5 端前路漫漫，坑很多，需要不斷嘗試。了解軟鍵盤(pán)彈起頁(yè)面在 IOS 和 Android 上的表現(xiàn)差異是前提，其次是將焦點(diǎn)元素滾動(dòng)到可視區(qū)，同時(shí)要考慮到第三方輸入法和某些瀏覽器上的差別?？偨Y(jié)肯定不全面，歡迎大家指正哈，完~


    當(dāng)前題目：可能這些是你想要的H5軟鍵盤(pán)兼容方案
    地址分享：http://m.5511xx.com/article/djjsjgp.html