VirtualKeyboard:hide() 方法

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

安全上下文: 此项功能仅在一些支持的浏览器安全上下文(HTTPS)中可用。

VirtualKeyboard 接口的 hide() 方法用于以编程方式隐藏屏幕上的虚拟键盘。这在需要通过使用虚拟键盘 API 实现自己的虚拟键盘逻辑时非常有用。

该方法仅在当前焦点元素的 virtualKeyboardPolicy 属性设置为 manual,且 inputmode 没有设置为 none 时起作用。

hide() 方法始终返回 undefined,并触发一个 geometrychange 事件。

语法

js
hide()

参数

无。

返回值

未定义。

示例

下面的代码片段展示了如何使用 virtualkeyboardpolicy 属性阻止浏览器在单击或轻触时显示虚拟键盘。代码还使用 navigator.virtualKeyboard.show()navigator.virtualKeyboard.hide() 方法,在点击按钮时显示和隐藏虚拟键盘:

html
<div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>
<button id="edit-button">编辑</button>
<script>
  if ("virtualKeyboard" in navigator) {
    const editor = document.getElementById("editor");
    const editButton = document.getElementById("edit-button");
    let isEditing = false;

    editButton.addEventListener("click", () => {
      if (isEditing) {
        navigator.virtualKeyboard.hide();
        editButton.textContent = "编辑";
      } else {
        editor.focus();
        navigator.virtualKeyboard.show();
        editButton.textContent = "保存更改";
      }

      isEditing = !isEditing;
    });
  }
</script>

规范

Specification
VirtualKeyboard API
# dom-virtualkeyboard-hide

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hide
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

参见