The show() method of the VirtualKeyboard interface programmatically shows the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic, especially when using the virtualkeyboardpolicy attribute on contenteditable elements as explained in Control the virtual keyboard on contenteditable elements.

This method only works if the currently-focused element is a form control — such as an <input> or <textarea> element — or if the focused element is contenteditable.

The show() method always returns undefined and triggers a geometrychange event.

None.

Undefined.

The code snippet below shows how to use the virtualkeyboardpolicy attribute to prevent the browser from showing the virtual keyboard on click or tap. The code also uses the navigator.virtualKeyboard.show() and navigator.virtualKeyboard.hide() methods to show and hide the virtual keyboard when a button is clicked:

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

• The VirtualKeyboard API
• Full control with the VirtualKeyboard API