App下載

h5中關(guān)于軟鍵盤(pán)兼容總結(jié)!

猿友 2021-08-06 10:08:43 瀏覽數(shù) (2162)
反饋

在html5中對(duì)于兼容這方面的問(wèn)題還是比較需要我們重視的,在不斷迭代的版本中我們需要注意的內(nèi)容更需要不斷的去探索使用的方法,那么接下來(lái)我們來(lái)分享有關(guān)于“ h5中關(guān)于軟鍵盤(pán)兼容總結(jié)!”這方面的相關(guān)內(nèi)容!

前言

最近一段時(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)收起。
// 判斷設(shè)備類(lèi)型
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)聽(tīng)輸入框的軟鍵盤(pán)彈起和收起事件
function listenKeybord($input) {
  if (judgeDeviceType.isIOS) {
    // IOS 鍵盤(pán)彈起:IOS 和 Android 輸入框獲取焦點(diǎn)鍵盤(pán)彈起
    $input.addEventListener('focus', function () {
      console.log('IOS 鍵盤(pán)彈起啦!');
      // IOS 鍵盤(pán)彈起后操作
    }, false)

    // IOS 鍵盤(pán)收起:IOS 點(diǎn)擊輸入框以外區(qū)域或點(diǎn)擊收起按鈕,輸入框都會(huì)失去焦點(diǎn),鍵盤(pán)會(huì)收起,
    $input.addEventListener('blur', () => {
      console.log('IOS 鍵盤(pán)收起啦!');
      // IOS 鍵盤(pán)收起后操作
    })
  }

  // Andriod 鍵盤(pán)收起:Andriod 鍵盤(pán)彈起或收起頁(yè)面高度會(huì)發(fā)生變化,以此為依據(jù)獲知鍵盤(pán)收起
  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 鍵盤(pán)收起啦!');
        // Android 鍵盤(pán)收起后操作
      } else {
        console.log('Android 鍵盤(pán)彈起啦!');
        // Android 鍵盤(pán)彈起后操作
      }

      originHeight = resizeHeight;
    }, false)
  }
}

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

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

彈起軟鍵盤(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ū)。查看效果,可以戳這里。

// 獲取到焦點(diǎn)元素滾動(dòng)到可視區(qū)
function activeElementScrollIntoView(activeElement, delay) {
  var editable = activeElement.getAttribute('contenteditable')

  // 輸入框、textarea或富文本獲取焦點(diǎn)后沒(méi)有將該元素滾動(dòng)到可視區(qū)
  if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {
    setTimeout(function () {
      activeElement.scrollIntoView();
    }, delay)
  }
}

// ...
// Android 鍵盤(pán)彈起后操作
activeElementScrollIntoView($input, 1000);
// ...

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

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

<p>請(qǐng)輸入手機(jī)號(hào)</p>
<input type="tel" novalidate="novalidate" pattern="[0-9]*" class="input">
  • type="tel", 是 HTML5 的一個(gè)屬性,表示輸入框類(lèi)型為電話號(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 類(lèi)、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 可以戳這里

console.log('IOS 鍵盤(pán)收起啦!');

// 微信瀏覽器版本6.7.4+IOS12會(huì)出現(xiàn)鍵盤(pán)收起后,視圖被頂上去了沒(méi)有下來(lái)
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));
}

兼容第三方輸入法

上面說(shuō)了那么多,其實(shí)已經(jīng)把 H5 聊天輸入框的坑填了一大半了,接下來(lái)就先看下聊天輸入框的基本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;
}
/* 省略一些樣式 */ 

很簡(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 滾到位。

console.log('Android 鍵盤(pán)彈起啦!');
activeElementScrollIntoView($input, 1000);

兼容 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)。綜合上面兼容第三方輸入法,查看效果可以戳這里:

// Andriod 鍵盤(pán)收起:Andriod 鍵盤(pán)彈起或收起頁(yè)面高度會(huì)發(fā)生變化,以此為依據(jù)獲知鍵盤(pán)收起
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 鍵盤(pán)收起啦!');

      // 修復(fù)小米瀏覽器下,輸入框依舊被輸入法遮擋問(wèn)題
      if (judgeDeviceType.isMiuiBrowser) {
        document.body.style.marginBottom = '0px';
      }
    } else {
      console.log('Android 鍵盤(pán)彈起啦!');

      // 修復(fù)小米瀏覽器下,輸入框依舊被輸入法遮擋問(wèn)題
      if (judgeDeviceType.isMiuiBrowser) {
        document.body.style.marginBottom = '40px';
      }
      activeElementScrollIntoView($input, 1000);
    }

    originHeight = resizeHeight;
  }, false)
}

總結(jié)

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

那么以上就是今天我們分享的內(nèi)容,那么有關(guān)于“h5中關(guān)于軟鍵盤(pán)兼容總結(jié)! ”這方面的相關(guān)內(nèi)容分享就到這邊了!更多有關(guān)于html5這方面的相關(guān)內(nèi)容都可以在W3Cschool中進(jìn)行學(xué)習(xí)!


0 人點(diǎn)贊