- 在ios中软键盘弹起时,仅会引起
$('body').scrollTop
值改变,但是我们可以通过输入框的获取焦点情况来做判断,但也只能在ios中采用这个方案,因为在android中存在主动收起键盘后,但输入框并没有失焦,而ios中键盘收起后就会失焦;
- 在android中软键盘弹起或收起时,会改变window的高度,因此监听window的
onresize
事件;
一、Android端监听
//获取原窗口的高度
let originalHeight = document.documentElement.clientHeight || document.body.clientHeight
window.οnresize = function() {
//键盘弹起与隐藏都会引起窗口的高度发生变化
let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
if (resizeHeight < originalHeight) {
//当键盘弹起,在此处操作
} else {
//当键盘收起,在此处操作
}
}
二、IOS端监听
/**
* 二、ios
*
* focusin和focusout支持冒泡,对应focus和blur,
* 使用focusin和focusout的原因是focusin和focusout可以冒泡,focus和blur不会冒泡,
* 这样就可以使用事件代理,处理多个输入框存在的情况。
*/
if (isIos) {
document.body.addEventListener('focusin', () => {
//软键盘弹出的事件处理
})
document.body.addEventListener('focusout', () => {
//软键盘收起的事件处理
})
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。