1 . 安卓系统 下点击输入框 键盘弹出以及收起 会使得webview 的窗口高度发生变化
键盘弹出的时候：
webview的原高度 = 键盘的高度 + webview 现在的窗口高度
Ios 系统 下 键盘弹出收起不会影响webview 的窗口高度发生变化
键盘弹出的时候 可以监听focusin事件; 键盘收起的时候 可以监听focuout 事件; （focusin/focusout 支持冒泡）
但是安卓系统下 点击键盘的右边的收起 不会触发 focuout事件； 只有其他空白处使得光标失去焦点(blur) 才会触发; 所以安卓下 可以通过判断 webview 的高度变化 来 监听键盘的弹出收起；
安卓下
//获取原窗口的高度
var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
window.onresize = function() {
// alert('高度发现变化')
//键盘弹起与隐藏都会引起窗口的高度发生变化
var resizeHeight=document.documentElement.clientHeight ||
document.body.clientHeight;
const activeEl = document.activeElement; // 获取当前点击的元素
if(resizeHeight<originalHeight){
//当软键盘弹起，在此处操作
console.log('当软键盘弹起，在此处操作')
if (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA') {}
} else {
//当软键盘收起，在此处操作
console.log('当软键盘收起，在此处操作')
if (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA') {
activeEl.blur
}
}
}Ios 系统下
document.body.addEventListener("focusin", (e) => {
});
document.body.addEventListener("focusout", () => {
});单独的input/textarea 监听键盘弹出、收起就监听各自的foucs/blur 事件参考：
彻底解决H5中键盘遮挡输入框的问题 - 知乎文章来源：https://www.toymoban.com/news/detail-520203.html
h5手机键盘弹出收起的处理 | Hzzly文章来源地址https://www.toymoban.com/news/detail-520203.html
到了这里，关于H5 输入框键盘弹出收起的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
