navigator.keyboard is a read-only property that returns a Keyboard object — the entry point for layout maps and Keyboard Lock (MDN). Use it to map physical keys to characters and optionally capture key presses.
Read the notes below before you rely on this property. Prefer feature detection when support is limited.
Use navigator.keyboard. Start with this line.
navigator.keyboard| Call | What it does |
|---|---|
navigator.keyboard | Primary signature. |
Built into the browser. Read navigator.keyboard on Navigator — no import required.
navigator.keyboard| Parameter | Description |
|---|---|
| lock() | Optional. Capture listed keys (or all) |
| unlock() | Optional. Release all locks (sync) |
| Return Value | Description |
|---|---|
| * | Keyboard object |
Check whether the Keyboard API is available before calling it.
const supported = "keyboard" in navigator;
console.log(supported ? "Keyboard API available" : "Keyboard API missing");in. "keyboard" in navigator checks for the property.KeyboardEvent listeners when unsupported.getLayoutMap()Find which character the physical KeyW key produces on this layout.
async function labelKeyW() {
if (!("keyboard" in navigator)) {
console.log("unsupported");
return;
}
const map = await navigator.keyboard.getLayoutMap();
const upKey = map.get("KeyW");
console.log("Press " + upKey + " to move up.");
}
labelKeyW();keyboard is missing.getLayoutMap(). Resolves to a KeyboardLayoutMap (MDN).map.get("KeyW") returns the layout string for that physical key.lock() / unlock()Capture WASD from a button click. Browsers often also require JavaScript-initiated fullscreen.
async function lockWasd() {
if (!("keyboard" in navigator) || !navigator.keyboard.lock) {
console.log("unsupported");
return;
}
try {
await navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);
console.log("WASD locked");
} catch (err) {
console.log("An error occurred.");
}
}
function unlockKeys() {
if (navigator.keyboard && navigator.keyboard.unlock) {
navigator.keyboard.unlock();
console.log("unlocked");
}
}
document.querySelector("#lock").addEventListener("click", lockWasd);
document.querySelector("#unlock").addEventListener("click", unlockKeys);lock().unlock(). Releases every lock synchronously (MDN).Navigator.keyboard is Experimental and Limited availability (not Baseline) on MDN. It requires a secure context. Permissions Policy may block layout map access.
Support is strongest in Chromium-based browsers (Chrome ~68+, Edge 79+, Opera). Firefox and Safari typically omit the Keyboard API. Always feature-detect.
Bottom line: Detect over HTTPS, use getLayoutMap for labels, lock only when needed from a gesture, and keep normal key events as the fallback.
Learn navigator.language for the user’s preferred language.
11 people found this page helpful