Android Chrome中Virtual Keyboard API的hide()方法失效问题

为啥hide()会失效？ #

• 浏览器抢了先：当输入框触发blur（失去焦点）事件时，Android Chrome已经自动开始执行隐藏虚拟键盘的操作了，这时候你再手动调用hide()，浏览器会直接忽略你的指令，因为它已经在做这件事了。
• 失焦后没权限了：虚拟键盘是和当前聚焦的输入框绑定的，一旦输入框失去焦点，浏览器就会收回对键盘的控制权，这时候你调用hide()相当于对着空气发指令，自然没用。
• manual策略有漏洞：虽然你设置了virtualkeyboardpolicy="manual"让浏览器别自动管键盘，但在输入框失焦这个场景下，Chrome还是会优先执行它内置的隐藏逻辑，根本不鸟你的手动调用。

怎么解决？ #

1. 稍微延迟调用hide() #

给hide()加个小延迟，避开浏览器的默认处理时机：

$("#my-input").on("blur", () => {
  setTimeout(() => {
    // 先确认键盘还显示着再调用
    if (navigator.virtualKeyboard?.isVisible) {
      navigator.virtualKeyboard.hide();
    }
  }, 50);
});

2. 换用focusout事件试试 #

focusout和blur类似但支持冒泡，试试在这个事件里阻止默认行为再调用hide()（部分场景有效）：

$("#my-input").on("focusout", (e) => {
  e.preventDefault();
  navigator.virtualKeyboard.hide();
});

3. 监听页面点击手动控制 #

监听整个页面的点击事件，只要点击的不是输入框，就手动隐藏键盘并让输入框失焦：

$(document).on("click", (e) => {
  const input = $("#my-input")[0];
  // 点击的不是输入框也不是输入框内部元素
  if (input !== e.target && !input.contains(e.target)) {
    if (navigator.virtualKeyboard?.isVisible) {
      navigator.virtualKeyboard.hide();
    }
    input.blur();
  }
});

4. 先确认浏览器支持这个API #

Virtual Keyboard API是比较新的功能，得确保Android Chrome版本在94以上，用下面的代码检测：

if ("virtualKeyboard" in navigator) {
  // 可以用这个API
} else {
  // 老浏览器，换个方案吧
}

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