JS 在客户端监听键盘的弹出和收起

最新推荐文章于 2023-12-19 14:25:32 发布

原创最新推荐文章于 2023-12-19 14:25:32 发布 · 684 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #JS #键盘

本文探讨了在iOS和Android平台上，如何通过监听键盘的弹出和收起事件，实现在键盘收起时触发input框失焦并进行接口请求的功能。在iOS上，input失焦时触发blur事件即可实现需求，但在Android上需要通过window高度变化来模拟键盘收起后的blur事件。

需求：在input输入完成后请求接口

1.在iOS中，input输入完成收起键盘，input框会失焦，所以将接口请求放在input的blur事件中就可以实现

2.在android中，收起键盘input框不会失焦，但我还是希望收起键盘时去做请求而不是一定时间内没有输入就去请求

3.键盘的弹出和收起会改变window的高度，所以可以通过window的高度来监听键盘

有参考网上其他人的做法

android：

var height = window.innerHeight;
window.addEventListener(“resize”, function windowResize() {
    var newHeight = window.innerHeight;
    if (height > newHeight) {
        //弹出
    } else {
        //这里我想和iOS一样键盘收起的后续事件都放在blur里去处理
        input.blur();
    }
})；
//移除监听
window.removeEventListener(“resize”, windowResize);

iOS：

window.addEventListener(“focusin”, function iosFocusin() {
    //弹出    
})；
window.addEventListener(“focusout”, function iosFocusout() {
    //收起  
})；
//移除监听同android