VirtualKeyboard: show()-Methode
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
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
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:
<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