共计 751 个字符,预计需要花费 2 分钟才能阅读完成。
- 在 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', () => {// 软键盘收起的事件处理}) | |
} |
正文完