VirtualKeyboard：show() 方法

Limited availability

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

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

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

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

该方法仅在当前焦点元素是表单控件（如 <input> 或 <textarea> 元素），或者当前焦点元素是 contenteditable，且当前焦点元素的 virtualKeyboardPolicy 属性设置为 manual 而 inputmode 没有设置为 none 时起作用。

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

语法

js
show()

参数

无。

返回值

undefined。

示例

下面的代码片段展示了如何使用 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-show

浏览器兼容性

BCD tables only load in the browser

参见