VirtualKeyboard API的hide()方法在focusout事件中失效求助

问题描述 #

我有一个运行在Android Chrome浏览器上的JavaScript应用，需求是：输入框初始获得焦点但不显示软键盘（作为扫描字段），仅当用户手动触摸该字段时，软键盘才弹出。

我使用了以下代码实现：

if ('virtualKeyboard' in navigator) {
    const myInput = getElementById("myinput");
    myInput.setAttribute("virtualkeyboardpolicy", "manual");
    navigator.virtualKeyboard.overlaysContent = true;

    myInput.addEventListener("pointerup", () => {
        navigator.virtualKeyboard.show();
    });

    myInput.addEventListener("focusout", () => {
        navigator.virtualKeyboard.hide();
    });
}

目前其他功能都正常，但在focusout事件中调用hide()无法隐藏软键盘，原本期望调用后软键盘会关闭，但实际没有生效，不确定是否和事件类型有关。

可能的原因 #

focusout是冒泡事件，触发时浏览器可能正在处理焦点转移的默认逻辑，此时调用hide()可能被浏览器内置行为覆盖，或者操作上下文已不允许修改虚拟键盘状态。

解决方案 #

1. 使用blur事件替代focusout #

blur是元素失去焦点时的非冒泡事件，触发时机更精准，避免冒泡带来的干扰：

myInput.addEventListener("blur", () => {
    navigator.virtualKeyboard.hide();
});

2. 延迟调用hide() #

给hide()添加微小延迟，让浏览器完成焦点转移逻辑后再执行隐藏操作：

myInput.addEventListener("focusout", () => {
    setTimeout(() => {
        navigator.virtualKeyboard.hide();
    }, 100);
});

3. 先检查虚拟键盘状态再隐藏 #

调用hide()前先判断虚拟键盘是否处于显示状态，确保操作有效：

myInput.addEventListener("focusout", () => {
    // 通过boundingRect的高度判断键盘是否显示
    if (navigator.virtualKeyboard.boundingRect.height > 0) {
        navigator.virtualKeyboard.hide();
    }
});

4. 结合全局触摸事件辅助处理 #

针对触摸场景，给文档添加触摸事件，当用户点击输入框以外区域时主动隐藏键盘并移除焦点：

document.addEventListener("touchstart", (e) => {
    if (e.target !== myInput && document.activeElement === myInput) {
        navigator.virtualKeyboard.hide();
        myInput.blur();
    }
});

另外，确保你的Chrome浏览器版本支持Virtual Keyboard API的完整特性，部分旧版本可能存在hide()方法的兼容性问题。

内容的提问来源于stack exchange，提问作者benny