虚拟键盘：show() 方法

实验性： 这是一个 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表。

安全上下文：此功能仅在 安全上下文（HTTPS）中可用，在某些或所有 支持的浏览器 中。

show() 方法是 VirtualKeyboard 接口的方法，用于以编程方式显示屏幕上的虚拟键盘。当页面需要实现自己的虚拟键盘逻辑时，这很有用，尤其是在使用 contenteditable 元素上的 virtualkeyboardpolicy 属性时，如 在 contenteditable 元素上控制虚拟键盘 中所述。

此方法仅在当前获得焦点的元素是表单控件（例如 <input> 或 <textarea> 元素）或当前获得焦点的元素为 contenteditable 且当前获得焦点的元素的 virtualKeyboardPolicy 属性设置为 manual 且 inputmode 未设置为 none 时有效。

show() 方法始终返回 undefined 并触发 geometrychange 事件。

语法

js
show()

参数

无。

返回值

未定义。

示例

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

js
<div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>
<button id="edit-button">Edit</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 = "Edit";
      } else {
        editor.focus();
        navigator.virtualKeyboard.show();
        editButton.textContent = "Save changes";
      }

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

规范

规范
VirtualKeyboard API
# dom-virtualkeyboard-show

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅