模拟移动端键盘监听事件¶
统计信息：字数 1951 阅读4分钟
洋洋_13dc关注
2019.06.12 14:07:37字数 327阅读 132
本以为h5有直接键盘监听事件，查找资料之后发现没有，找到一篇大神的文章，很有用，感谢大神 原文链接https://www.jianshu.com/p/005eacc3bc34
好记性不如烂笔头
js是没有方法直接对软键盘进行监听的
如果非要监听，我们只能模拟
focus和blur是不会冒泡的，而focusin和focusout可以支持冒泡 所以我们可以用事件代理对focusout进行监听
window.addEventListener('focusout', () => {
// doSomething
});
但是ios可以监听focusout事件，而安卓监听不到，安卓在收起键盘后，input仍处于focus状态，所以无法触发focusout事件
但是，天无绝人之路
安卓在收起键盘后，窗口高度会有所改变，也就是window.innerHeight会变化，ios不会
所以，
if (/Android/gi.test(navigator.userAgent)) {
/**
* 模拟安卓监控键盘弹出收起事件
*/
const innerHeight = window.innerHeight
window.addEventListener('resize', () => {
const newInnerHeight = window.innerHeight
if (innerHeight > newInnerHeight) {
// 键盘弹出事件处理
} else {
// 键盘收起事件处理
// this.showSearchInput = false
}
})
} else {
/**
* 模拟ios监控键盘弹出收起事件
*/
window.addEventListener('focusin', () => {
// 键盘弹出事件处理
})
window.addEventListener('focusout', () => {
// 键盘收起事件处理
// this.showSearchInput = false
})
}
0人点赞