VirtualKeyboard.hide() — Methode · JavaScript-Referenz

Signatur

VirtualKeyboard.prototype.hide()

Beschreibung

Die Methode hide() des VirtualKeyboard-Interfaces blendet die virtuelle Bildschirmtastatur des Geräts per Skript aus. Sie erreichen die Instanz über navigator.virtualKeyboard. Die Methode hat keine Parameter und gibt undefined zurück.

Wichtig: hide() wirkt nur, wenn das gerade fokussierte Element das Attribut virtualkeyboardpolicy="manual" hat und außerdem bearbeitbar ist (<input>, <textarea> oder ein Element mit contenteditable). Mit manual übernimmt die Seite selbst die Kontrolle: Der Browser blendet die Tastatur dann beim Fokussieren oder Antippen nicht mehr automatisch ein oder aus. Das Gegenstück dazu ist show().

Typische Einsatzfälle sind eigene Editoren, Chat-Oberflächen oder Spiele. Dort soll die Tastatur zum Beispiel nach dem Absenden einer Nachricht verschwinden, während der Fokus im Eingabefeld bleibt. Auch wenn Sie eine eigene Bildschirm-Eingabe anbieten (etwa ein Ziffernfeld), lässt sich die Systemtastatur so gezielt ausblenden. Ob die Tastatur wirklich verschwunden ist, erfahren Sie über das Ereignis geometrychange und die Eigenschaft boundingRect.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. Die Methode meldet weder Erfolg noch Misserfolg; das tatsächliche Ausblenden erkennen Sie am geometrychange-Ereignis.

Beispiele

Tastatur nach dem Absenden einer Chat-Nachricht ausblenden

// HTML: <textarea id="msg" virtualkeyboardpolicy="manual"></textarea>
//       <button id="send">Senden</button>
const msg = document.querySelector('#msg');
const send = document.querySelector('#send');

// Bei manual muss die Seite die Tastatur selbst einblenden
msg.addEventListener('pointerdown', () => {
  navigator.virtualKeyboard?.show();
});

send.addEventListener('pointerdown', (event) => {
  event.preventDefault(); // Fokus bleibt im Textfeld
  console.log('Gesendet:', msg.value);
  msg.value = '';
  navigator.virtualKeyboard?.hide();
});

Gesendet: Hallo Welt

Funktionsprüfung mit Rückfall auf blur()

const hideKeyboard = (element) => {
  if ('virtualKeyboard' in navigator && element.virtualKeyboardPolicy === 'manual') {
    navigator.virtualKeyboard.hide();
    return 'VirtualKeyboard-API';
  }
  // Rückfall: Fokus entfernen, damit der Browser die Tastatur schließt
  element.blur();
  return 'blur()-Rückfall';
};

const input = document.querySelector('input');
input.focus();
console.log(hideKeyboard(input));

VirtualKeyboard-API (in Chromium mit virtualkeyboardpolicy="manual")

Ausblenden über geometrychange bestätigen

const vk = navigator.virtualKeyboard;

vk.addEventListener('geometrychange', () => {
  const { height } = vk.boundingRect;
  console.log(height === 0 ? 'Tastatur ausgeblendet' : `Tastatur sichtbar (${height}px)`);
});

document.querySelector('#closeKeyboard').addEventListener('click', () => vk.hide());

Tastatur ausgeblendet

Eigenes Ziffernfeld statt Systemtastatur

// HTML: <input id="pin" virtualkeyboardpolicy="manual" inputmode="numeric">
const pin = document.querySelector('#pin');

pin.addEventListener('focus', () => {
  navigator.virtualKeyboard?.hide(); // Systemtastatur unterdrücken
  document.querySelector('#custom-pad').hidden = false;
});

document.querySelectorAll('#custom-pad button').forEach((btn) => {
  btn.addEventListener('click', () => {
    pin.value += btn.textContent;
  });
});

// Wichtig · Fallstricke

Experimentell: Die API gibt es bisher nur in Chromium-Browsern (Chrome und Edge ab Version 94), vor allem auf Android und Tablets mit ChromeOS oder Windows. Firefox und Safari unterstützen sie nicht. Prüfen Sie deshalb vorher mit 'virtualKeyboard' in navigator.
Nur in sicheren Kontexten: Die API ist nur über HTTPS (oder localhost) verfügbar.
Kein Fehler bei fehlenden Voraussetzungen: Hat das fokussierte Element kein virtualkeyboardpolicy="manual" oder ist es nicht bearbeitbar, passiert beim Aufruf von hide() einfach nichts, auch keine Fehlermeldung.
Fokus beachten: Klicks auf Schaltflächen entziehen dem Eingabefeld oft den Fokus. Rufen Sie event.preventDefault() im pointerdown- oder mousedown-Handler auf, damit das Feld fokussiert bleibt.
Barrierefreiheit: Wenn Sie die Tastatur ohne Ersatz ausblenden, können Nutzerinnen und Nutzer womöglich nichts mehr eingeben. Bieten Sie immer einen sichtbaren Weg an, um sie wieder einzublenden (show()).
Bei virtualkeyboardpolicy="manual" blendet der Browser die Tastatur beim Antippen nicht mehr automatisch ein. Das müssen Sie dann selbst mit show() erledigen.

Siehe auch

VirtualKeyboard VirtualKeyboard.show() VirtualKeyboard.boundingRect VirtualKeyboard.overlaysContent Navigator.virtualKeyboard HTMLElement.virtualKeyboardPolicy