Signatur
Beschreibung
Die Methode values() gehört zur Schnittstelle KeyboardLayoutMap aus der Keyboard API. Sie funktioniert wie Map.prototype.values() und gibt einen Iterator zurück. Dieser liefert der Reihe nach die Werte der Map. Das sind Zeichenketten mit dem Zeichen, das eine physische Taste im gerade aktiven Tastaturlayout erzeugt, zum Beispiel "z", "ü" oder "ß".
Die zugehörigen Schlüssel sind physische Tastencodes wie "KeyW" oder "BracketLeft". Sie entsprechen der Eigenschaft KeyboardEvent.code und hängen nicht vom Layout ab. Eine KeyboardLayoutMap bekommt man über navigator.keyboard.getLayoutMap(). Diese Methode gibt ein Promise zurück.
values() ist nützlich, wenn nur die erzeugbaren Zeichen gebraucht werden und nicht die Tastencodes. Beispiele: Sie wollen prüfen, ob ein bestimmtes Zeichen (etwa ein Umlaut) direkt auf dem Layout liegt, oder Sie wollen eine Übersicht aller verfügbaren Zeichen zeigen. Wenn Sie wissen müssen, welche Taste ein Zeichen erzeugt, verwenden Sie besser entries() oder forEach().
Rückgabewert
for...of, dem Spread-Operator oder Array.from() durchlaufen.Beispiele
Alle Zeichen des aktuellen Layouts ausgeben
const zeigeZeichen = async () => {
if (!('keyboard' in navigator)) {
console.warn('Keyboard API wird nicht unterstützt.');
return;
}
const layoutMap = await navigator.keyboard.getLayoutMap();
for (const zeichen of layoutMap.values()) {
console.log(zeichen);
}
};
zeigeZeichen();Prüfen, ob Umlaute direkt eingegeben werden können
const hatUmlaute = async () => {
const layoutMap = await navigator.keyboard.getLayoutMap();
const zeichen = new Set(layoutMap.values());
return ['ä', 'ö', 'ü'].every((u) => zeichen.has(u));
};
hatUmlaute().then((ok) => {
console.log(ok ? 'Deutsches Layout erkannt' : 'Keine Umlaut-Tasten');
});Werte als Array weiterverarbeiten
const ladeBuchstaben = async () => {
const layoutMap = await navigator.keyboard.getLayoutMap();
// Iterator in ein Array umwandeln und nur Buchstaben behalten
const buchstaben = [...layoutMap.values()]
.filter((z) => /^\p{L}$/u.test(z))
.sort((a, b) => a.localeCompare(b, 'de'));
console.log(buchstaben.join(' '));
};
ladeBuchstaben();// Wichtig · Fallstricke
- Browser-Unterstützung: Die Keyboard API ist experimentell und steht nur in Chromium-Browsern zur Verfügung (Chrome, Edge, Opera, ab Version 69). Firefox und Safari unterstützen sie nicht. Prüfen Sie deshalb vorher mit
'keyboard' in navigator, ob die API vorhanden ist. - Sicherer Kontext: Die API funktioniert nur über HTTPS bzw.
localhost. In Iframes kann die Berechtigungsrichtlinie (keyboard-map)getLayoutMap()blockieren. Dann wird das Promise mit einemSecurityErrorabgelehnt. - Nur Zeichen, keine Tasten: Aus den Werten allein lässt sich nicht ablesen, welche physische Taste ein Zeichen erzeugt. Dafür brauchen Sie
entries()oderget(code). - Momentaufnahme: Die Map zeigt das Layout zum Zeitpunkt des Aufrufs. Wechselt der Benutzer danach das Layout, müssen Sie
getLayoutMap()erneut aufrufen. - Iterator nur einmal nutzbar: Ein durchlaufener Iterator ist erschöpft. Für einen weiteren Durchlauf rufen Sie
values()erneut auf oder wandeln das Ergebnis in ein Array um. - Tasten mit toten Zeichen (Akzenttasten) oder Tasten ohne druckbares Zeichen können fehlen oder unerwartete Werte haben.