js监听软键盘收起

在JavaScript中，监听软键盘收起可以通过监听窗口尺寸的变化来实现。以下是具体的实现方式：

基本概念

软键盘收起时，通常会导致浏览器窗口的高度发生变化。通过监听这种变化，我们可以判断软键盘是否收起。

实现方法

使用resize事件监听窗口尺寸变化：当软键盘弹出或收起时，浏览器窗口的尺寸会发生变化，可以通过监听resize事件来检测这种变化。
记录窗口高度：在页面加载时记录当前窗口的高度，然后在resize事件中比较当前窗口高度与记录的高度，从而判断软键盘的状态。

示例代码

let initialHeight = window.innerHeight;

window.addEventListener('resize', function() {
    let currentHeight = window.innerHeight;
    if (currentHeight > initialHeight) {
        // 软键盘收起
        console.log('软键盘已收起');
        // 这里可以执行一些操作，比如重置输入框焦点等
    } else {
        // 软键盘弹出或窗口尺寸变化
        initialHeight = currentHeight;
    }
});

优势

简单有效：通过监听窗口尺寸变化来判断软键盘状态是一种简单且有效的方法。
兼容性好：这种方法在大多数现代浏览器中都能正常工作。

应用场景

表单提交：在用户提交表单时，确保软键盘已经收起，提升用户体验。
页面布局调整：根据软键盘的状态调整页面布局，避免内容被遮挡。

注意事项

误判情况：窗口尺寸的变化不仅仅是由软键盘引起的，还可能是用户旋转设备、切换标签页等其他操作导致的。因此，在实际应用中可能需要结合其他条件进行判断。
性能考虑：频繁触发resize事件可能会影响性能，可以通过节流（throttle）或防抖（debounce）技术来优化。

解决误判问题

为了避免误判，可以结合其他条件进行判断，例如：

检测输入框焦点：只有在输入框失去焦点且窗口尺寸变化时，才认为是软键盘收起。
节流处理：对resize事件进行节流处理，减少事件触发频率，提高性能。

let initialHeight = window.innerHeight;
let isInputFocused = false;

window.addEventListener('focusin', function(event) {
    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
        isInputFocused = true;
    }
});

window.addEventListener('focusout', function(event) {
    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
        isInputFocused = false;
    }
});

function checkKeyboardStatus() {
    let currentHeight = window.innerHeight;
    if (!isInputFocused && currentHeight > initialHeight) {
        console.log('软键盘已收起');
        // 执行相关操作
    } else {
        initialHeight = currentHeight;
    }
}

// 使用节流函数优化resize事件处理
function throttle(func, wait) {
    let timeout = null;
    return function() {
        if (!timeout) {
            timeout = setTimeout(() => {
                func();
                timeout = null;
            }, wait);
        }
    };
}

window.addEventListener('resize', throttle(checkKeyboardStatus, 200));

通过上述方法，可以更准确地监听软键盘的收起事件，并根据需要进行相应的处理。