vue3 h5 监听键盘的弹起与收起
时间: 2023-11-04 17:35:32 浏览: 304
对于vue3 h5监听键盘的弹起与收起,我们可以使用window对象的resize事件和document对象的focusin和focusout事件来实现。具体方法可以参考以下代码:
// 监听键盘弹起函数
function onKeyboardShow() {
//...处理键盘弹起事件
}
// 监听键盘收起函数
function onKeyboardHide() {
//...处理键盘收起事件
}
// 监听窗口大小改变事件
window.addEventListener('resize', () => {
if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
if(document.body.scrollTop > 0) { // IOS系统自带输入法
onKeyboardShow();
} else { // 安卓系统自带输入法
onKeyboardHide();
}
} else {
onKeyboardHide();
}
});
// 监听input和textarea获取焦点事件
document.addEventListener('focusin', () => {
onKeyboardShow();
});
// 监听input和textarea失去焦点事件
document.addEventListener('focusout', () => {
onKeyboardHide();
});
阅读全文