VirtualKeyboard.show() — Methode · JavaScript-Referenz

Signatur

VirtualKeyboard.prototype.show()

Beschreibung

Die Methode show() der Schnittstelle VirtualKeyboard öffnet die virtuelle Bildschirmtastatur auf Geräten mit Touch-Eingabe. Du erreichst die Schnittstelle über navigator.virtualKeyboard. Nützlich ist die Methode vor allem in Web-Apps, die selbst steuern wollen, wann die Tastatur erscheint. Beispiele sind Editoren, Chat-Oberflächen und Spiele, bei denen ein Fokus allein die Tastatur noch nicht öffnen soll.

show() wirkt nur, wenn alle diese Bedingungen erfüllt sind:

Das aktuell fokussierte Element ist editierbar, also ein <input>, eine <textarea> oder ein Element mit contenteditable.
Das Element hat das Attribut virtualkeyboardpolicy="manual".
Der Aufruf geschieht in Folge einer Nutzeraktion, zum Beispiel in einem click- oder pointerup-Handler (flüchtige Nutzeraktivierung, englisch „transient activation“).

Fehlt eine dieser Bedingungen, passiert nichts. Die Methode wirft dann keinen Fehler. Das Gegenstück ist hide(). Ob die Tastatur tatsächlich sichtbar ist, erfährst du über die Eigenschaft boundingRect und das Ereignis geometrychange.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück. Ob die Tastatur tatsächlich erscheint, siehst du nur über geometrychange bzw. navigator.virtualKeyboard.boundingRect.

Beispiele

Tastatur erst per Button-Klick öffnen

// HTML: <div id="editor" contenteditable virtualkeyboardpolicy="manual"></div>
//       <button id="tippen">Tastatur öffnen</button>
const editor = document.getElementById('editor');
const button = document.getElementById('tippen');

button.addEventListener('click', () => {
  if (!('virtualKeyboard' in navigator)) {
    console.log('VirtualKeyboard API nicht verfügbar');
    return;
  }
  editor.focus();                  // Fokus muss auf dem editierbaren Element liegen
  navigator.virtualKeyboard.show(); // Aufruf innerhalb der Nutzeraktion
});

Tastatur beim Doppeltippen ein- und ausblenden

const feld = document.querySelector('textarea');
feld.setAttribute('virtualkeyboardpolicy', 'manual');

let offen = false;
feld.addEventListener('dblclick', () => {
  const vk = navigator.virtualKeyboard;
  if (!vk) return;
  feld.focus();
  if (offen) {
    vk.hide();
  } else {
    vk.show();
  }
  offen = !offen;
});

Prüfen, ob die Tastatur wirklich erschienen ist

const vk = navigator.virtualKeyboard;
if (vk) {
  vk.overlaysContent = true; // Layout selbst steuern
  vk.addEventListener('geometrychange', () => {
    const { height } = vk.boundingRect;
    console.log(height > 0 ? `Tastatur sichtbar (${height}px)` : 'Tastatur verborgen');
    document.body.style.paddingBottom = `${height}px`;
  });

  document.querySelector('#schreiben').addEventListener('click', () => {
    document.querySelector('#nachricht').focus();
    vk.show();
  });
}

Tastatur sichtbar (312px)

// Wichtig · Fallstricke

Schlägt ohne Meldung fehl: Fehlt virtualkeyboardpolicy="manual", liegt der Fokus nicht auf einem editierbaren Element oder fehlt eine Nutzeraktion, bleibt der Aufruf wirkungslos. Es wird kein Fehler geworfen. Rufst du show() z. B. in setTimeout oder nach einem await auf, ist die Nutzeraktivierung oft schon verfallen.
Kompatibilität: Die Methode ist experimentell. Sie gibt es nur in Chromium-Browsern (Chrome und Edge ab Version 94, vor allem auf Android und ChromeOS) und nur in sicheren Kontexten (HTTPS). Firefox und Safari unterstützen sie nicht. Prüfe deshalb vorher mit 'virtualKeyboard' in navigator.
Auf Desktop-Geräten ohne Touch-Tastatur hat show() in der Regel keine sichtbare Wirkung.
Mit virtualkeyboardpolicy="manual" öffnet ein normales Antippen die Tastatur nicht mehr automatisch. Du musst show() dann selbst aufrufen, sonst können Nutzer nichts eingeben.

Siehe auch

VirtualKeyboard VirtualKeyboard.hide() VirtualKeyboard.boundingRect VirtualKeyboard.overlaysContent Navigator.virtualKeyboard TaskSignal.any()