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 属性设置为 manualinputmode 没有设置为 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

浏览器兼容性

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
show
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.

参见