移动端开发-监听虚拟键盘弹出收起

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

移动端判断虚拟键盘弹出或收起

iOS监听虚拟键盘弹出收起

focusin/focusout事件早于focus/blur事件触发。

1
2
3
4
5
// 弹出
document.body.addEventListener('focusin', focusin)

// 收起
document.body.addEventListener('focusout', focusout)

Android监听虚拟键盘弹出收起

Android虚拟键盘弹出或收起时，会改变window的高度，因此通过监听window的resize事件判断状态：

1
2
3
4
5
6
7
8
9
10
11
12
13
const originHeight = document.documentElement.clientHeight || document.body.clientHeight

function reisze() {
    const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight

    if (resizeHeight < originHeight) {
        // 键盘弹出
    } else {
        // 键盘收起
    }
}

window.addEventListener('resize', reisze)