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

样式

/* 省略一些样式 */  
.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;  
}  
/* 省略一些样式 */  

很简朴，就是分别内容区和输入区，输入区是绝对定位，凭证上面表单输入 demo 的做法，确实大部门 Android 赏识器是没题目的，可是测试在 IOS 上，UC 赏识器共同原生输入法和第三方输入法(好比搜狗输入法)，输入框城市被完全盖住;QQ 赏识器或微信赏识器，共同第三方输入法，输入框会被遮住一半;百度赏识器共同第三方输入法输入框也会被完全遮住。查察结果可以用响应赏识器中会见这里。

在 UC 赏识器上，软键盘弹起后，赏识器上面的问题栏高度就有个高度变小延时动态结果，这样导致 webview 往下滚了一点，底部输入框滚到了非可视区。

而对付第三方输入法，揣摩自己是因为输入法面板弹起后高度计较有误，导致 webview 初始转动定位有误。其拭魅这两点都是 webview 转动不到位造成的。可以让软键盘弹起后，让核心元素再次滚到可视区，强制 webview 滚到位。

console.log('Android 键盘弹起啦!');  
// Android 键盘弹起后操纵  
activeElementScrollIntoView($input, 1000);  

兼容 Android 小米赏识器的 Hack 方案

在 Android 的小米赏识器上，应用上面的方案，发明谈天输入框照旧被遮挡得严严实实，scrollIntoView() 如故纹丝不动。以是揣摩，着实是滚到底了，软键盘弹起，页面实现高度大于可视区高度，这样只能在软键盘弹起后，强行增进页面高度，使输入框可以表现出来。综合上面兼容第三方输入法，查察结果可以戳这里：

// 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 键盘收起后操纵  
// 修复小米赏识器下，输入框仍旧被输入法遮挡题目  
if (judgeDeviceType.isMiuiBrowser) {  
document.body.style.marginBottom = '0px';  
}  
} else {  
console.log('Android 键盘弹起啦!');  
// Android 键盘弹起后操纵  
// 修复小米赏识器下，输入框仍旧被输入法遮挡题目  
if (judgeDeviceType.isMiuiBrowser) {  
document.body.style.marginBottom = '40px';  
}  
activeElementScrollIntoView($input, 1000);  
}  
originHeight = resizeHeight;  
}, false)  
}  

总结

（编辑：湖南网）

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