也许这些是你想要的H5软键盘兼容方案

偶然我们会做一个输入表单，有许多输入项，输入框获取核心，弹起软键盘。当输入框位于页面下部位置时，在 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> 

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!