可能这些是你想要的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)  
}  

总结

（编辑：晋中站长网）

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