W3cubDocs

/Web APIs

VirtualKeyboard: hide() method

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The hide() method of the VirtualKeyboard interface programmatically hides the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic by using the VirtualKeyboard API.

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 hide() method always returns undefined and triggers a geometrychange event.

Syntax

js

hide()

Parameters

None.

Return value

Undefined.

Example

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:

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>

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
hide 94 94 No No 80 No 94 94 No 66 No 17.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard/hide