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

媒介

最近一段时刻在做 H5 谈天项目，踩过个中一大坑：输入框获取核心，软键盘弹起，要求输入框吸附(或顶)在输入法框上。需求很明晰，看似很简朴，着实否则。从尝试过一些机型上看，发明首要存在以下题目：

• 在 Android 和 IOS 上，获知软键盘弹起和收起状态存在差别，且页面 webview 示意差异。
• 在IOS12 上，微信版本 v6.7.4 及以上，输入框获取核心，键盘弹起，页面(webview)整体往上转动，当键盘收起后，不回到原位，导致键盘原本地址位置是空缺的。
• 在 IOS 上，行使第三方输入法，高度计较存在毛病，导致在有些输入法弹起，将输入框盖住一部门。
• 在有些赏识器上行使一些操纵能力，照旧存在输入框被输入法遮挡。

下面就上述发明的题目，逐个试探一下办理方案。

获知软键盘弹起和收起状态

获知软键盘的弹起照旧收起状态很重要，后头的兼容处理赏罚都要以此为条件。然而，H5 并没有直接监听软键盘的原闹变乱，只能通过软键盘弹起或收起，激发页面其他方面的示意间接监听，曲线救国。而且，在 IOS 和 Android 上的示意不尽沟通。

IOS 软键盘弹起示意

在 IOS 上，输入框(input、textarea 或 富文本)获取核心，键盘弹起，页面(webview)并没有被压缩，可能说高度(height)没有改变，只是页面(webview)整体往上滚了，且最大转动高度(scrollTop)为软键盘高度。

Android 软键盘弹起示意

同样，在 Android 上，输入框获取核心，键盘弹起，可是页面(webview)高度会产生改变，一样平常来说，高度为可视区高度(原高度减去软键盘高度)，除了由于页面内容被撑开可以发生转动，webview 自己不能转动。

IOS 软键盘收起示意

触发软键盘上的“收起”按钮键盘可能输入框以外的页面地区时，输入框失去核心，软键盘收起。

Android 软键盘收起示意

触发输入框以外的地区时，输入框失去核心，软键盘收起。可是，触发键盘上的收起按钮键盘时，输入框并不会失去核心，同样软键盘收起。

监听软键盘弹起和收起

综合上面键盘弹起和收起在 IOS 和 Android 上的差异示意，我们可以分隔举办如下处理赏罚来监听软键盘的弹起和收起：

• 在 IOS 上，监听输入框的 focus 变乱来获知软键盘弹起，监听输入框的 blur 变乱获知软键盘收起。
• 在 Android 上，监听 webview 高度会变革，高度变小获知软键盘弹起，不然软键盘收起。 

// 判定装备范例  
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  
}  
}()  
// 监听输入框的软键盘弹起和收起变乱  
function listenKeybord($input) {  
if (judgeDeviceType.isIOS) {  
// IOS 键盘弹起：IOS 和 Android 输入框获取核心键盘弹起  
$input.addEventListener('focus', function () {  
console.log('IOS 键盘弹起啦!');  
// IOS 键盘弹起后操纵  
}, false)  
// IOS 键盘收起：IOS 点击输入框以外地区或点击收起按钮，输入框城市失去核心，键盘会收起，  
$input.addEventListener('blur', () => {  
console.log('IOS 键盘收起啦!');  
// IOS 键盘收起后操纵  
})  
}  
// Andriod 键盘收起：Andriod 键盘弹起或收起页面高度会产生变革，以此为依据获知键盘收起  
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]);  
}  

弹起软键盘始终让输入框转动到可视区

（编辑：河北网）

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