VirtualKeyboard: show()-Methode

Limited availability

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

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Die show()-Methode des VirtualKeyboard-Interfaces zeigt programmatisch die virtuelle Bildschirmtastatur an. Dies ist nützlich, wenn die Seite ihre eigene virtuelle Tastaturlogik implementieren muss, insbesondere bei der Verwendung des virtualkeyboardpolicy-Attributs auf contenteditable-Elementen, wie in Steuern der virtuellen Tastatur auf contenteditable-Elementen erklärt.

Diese Methode funktioniert nur, wenn das aktuell fokussierte Element ein Formularelement ist – wie ein <input>- oder <textarea>-Element – oder wenn das fokussierte Element contenteditable ist und das virtualKeyboardPolicy-Attribut des aktuell fokussierten Elements auf manual gesetzt ist und inputmode nicht auf none gesetzt ist.

Die show()-Methode gibt immer undefined zurück und löst ein geometrychange-Ereignis aus.

Syntax

js
show()

Parameter

Keine.

Rückgabewert

Undefined.

Beispiel

Der folgende Codeausschnitt zeigt, wie das virtualkeyboardpolicy-Attribut verwendet wird, um den Browser daran zu hindern, die virtuelle Tastatur bei Klick oder Tipp zu zeigen. Der Code verwendet außerdem die Methoden navigator.virtualKeyboard.show() und navigator.virtualKeyboard.hide(), um die virtuelle Tastatur anzuzeigen bzw. zu verbergen, wenn eine Schaltfläche geklickt wird:

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>

Spezifikationen

Specification
VirtualKeyboard API
# dom-virtualkeyboard-show

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch