可能这些是你想要的H5软键盘兼容方案(2)

有时我们会做一个输入表单，有很多输入项，输入框获取焦点，弹起软键盘。当输入框位于页面下部位置时，在 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);  
// ...  

唤起纯数字软键盘

上面的表单输入框有要求输入电话号码，类似这样就要弹出一个数字软键盘了，既然说到了软键盘兼容，在这里就安插一下。比较好的解决方案如下：

<p>请输入手机号</p>  
<input type="tel" novalidate="novalidate" pattern="[0-9]*" class="input">  

• type="tel"， 是 HTML5 的一个属性，表示输入框类型为电话号码，在 Android 和 IOS 上表现差不多，都会有数字键盘，但是也会有字母，略显多余。
• pattern="[0-9]"， pattern 用于验证表单输入的内容，通常 HTML5 的 type 属性，比如 email、tel、number、data 类、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 后，前端部分的验证更加简单高效了。IOS 中，只有 [0-9]\* 才可以调起九宫格数字键盘，\d 无效，Android 4.4 以下(包括X5内核)，两者都调起数字键盘。
• novalidate="novalidate"，novalidate 属性规定当提交表单时不对其进行验证，由于 pattern 校验兼容性不好，可以不让其校验，只让其唤起纯数字键盘，校验工作由 js 去做。

兼容 IOS12 + V6.7.4+

如果你在用 IOS12 和 V6.7.4+版本的微信浏览器打开上面表单输入的 demo ，就会惊奇的发现键盘收起后，原本被滚动顶起的页面并没有回到底部位置，导致原来键盘弹起的位置“空”了。

其实这是 Apple 在 IOS 的 bug，会出现在所有的 Xcode10 打包的 IOS12 的设备上。微信官方已给出解决方案，只需在软键盘收起后，将页面(webview)滚回到窗口最底部位置(clientHeight位置)。修复后的上面表单输入 demo 可以戳这里：

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) {  
window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));  
}  

兼容第三方输入法

上面说了那么多，其实已经把 H5 聊天输入框的坑填了一大半了，接下来就先看下聊天输入框的基本HTML结构。

<div class="chat__content">  
  <div>  
    <p>一些聊天内容1</p>  
  </div>  
  <!-- 省略几千行聊天内容 -->  
</div>  
<div class="input__content">  
  <div class="input" contenteditable="true"></div>  
  <button>发送</button>  
</div> 

（编辑：ASP站长网）