JavaScript Navigator keyboard Property

What You’ll Learn

navigator.keyboard is the entry point for the Keyboard API. Learn layout maps with getLayoutMap, Keyboard Lock with lock / unlock, secure context rules, five examples, and try-it labs.

Introduction

Games and creative apps often need two special keyboard powers: know what character a physical key produces on this user’s layout, and sometimes capture keys that the browser would normally steal (like media keys or Esc in fullscreen).

navigator.keyboard returns a Keyboard object for that. Use getLayoutMap() for layout-aware hints (“press Z to move up” on AZERTY), and lock() / unlock() for Keyboard Lock in immersive apps.

Understanding the keyboard Property

Think of navigator.keyboard as the front desk for two related features: Keyboard Map and Keyboard Lock.

• Keyboard object — entry point returned by navigator.keyboard.
• getLayoutMap() — map physical codes (KeyW) to layout strings.
• lock(keyCodes) — capture listed physical keys for your page.
• unlock() — release all captured keys.
• Secure context — HTTPS / localhost required in supporting browsers.

📝 Syntax

General form of the property:

navigator.keyboard

Value

• A Keyboard object when the API is available.
• Missing / unavailable when unsupported or not in a secure context.

Common patterns

// MDN-style layout lookup:
if (navigator.keyboard) {
  const keyboard = navigator.keyboard;
  keyboard.getLayoutMap().then((keyboardLayoutMap) => {
    const upKey = keyboardLayoutMap.get("KeyW");
    console.log("Press " + upKey + " to move up.");
  });
}

// Keyboard Lock (games / fullscreen apps):
// await navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);
// navigator.keyboard.unlock();

Examples Gallery

Examples follow MDN Keyboard / navigator.keyboard patterns. Prefer Try It Yourself on HTTPS. Keyboard Lock may require fullscreen or other browser rules.

const supported = Boolean(navigator.keyboard);
console.log(supported ? "Keyboard API available" : "Keyboard API missing");

Keyboard API missing
(or "Keyboard API available" in a supporting browser)

console.log("secure: " + window.isSecureContext);
console.log("keyboard: " + Boolean(navigator.keyboard));

if (!window.isSecureContext) {
  console.log("Serve over HTTPS to use navigator.keyboard");
} else if (!navigator.keyboard) {
  console.log("Secure, but Keyboard API not exposed");
} else {
  console.log("Ready for getLayoutMap / lock");
}

secure: true
keyboard: false
Secure, but Keyboard API not exposed
(messages vary by browser and URL)

async function labelForKeyW() {
  if (!navigator.keyboard) {
    return "Keyboard API not supported.";
  }
  const map = await navigator.keyboard.getLayoutMap();
  const upKey = map.get("KeyW");
  return "Press " + upKey + " to move up.";
}

labelForKeyW().then(console.log);

Keyboard API not supported.
(or "Press w to move up." / another layout character)

async function lockWasd() {
  if (!navigator.keyboard || !navigator.keyboard.lock) {
    return "Keyboard Lock not supported.";
  }
  await navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);
  return "Locked KeyW / KeyA / KeyS / KeyD (call unlock() when done)";
}

// Prefer calling from a user gesture / fullscreen game session.
// navigator.keyboard.unlock();

Keyboard Lock not supported.
(or lock success / browser rejection message)

function keyboardStatus() {
  const kb = navigator.keyboard;
  return {
    available: Boolean(kb),
    secureContext: window.isSecureContext,
    hasGetLayoutMap: Boolean(kb && typeof kb.getLayoutMap === "function"),
    hasLock: Boolean(kb && typeof kb.lock === "function"),
    advice: kb
      ? "Use getLayoutMap for labels; lock only in immersive apps"
      : "Fall back to keydown / keyup with event.code"
  };
}

console.log(JSON.stringify(keyboardStatus()));

{"available":false,"secureContext":true,"hasGetLayoutMap":false,"hasLock":false,"advice":"Fall back to keydown / keyup with event.code"}

🚀 Common Use Cases

• Localized game hints — show the right key label for “move up” on every layout.
• Fullscreen games — lock WASD / Esc handling when the browser allows it.
• Creative tools — capture keys that would otherwise trigger browser chrome.
• Accessibility copy — teach shortcuts using the user’s actual key glyphs.
• Progressive enhancement — Keyboard API when present; event.code otherwise.

📝 Notes

• Experimental and not Baseline — support is limited.
• Not Deprecated or Non-standard on MDN.
• Secure context required (HTTPS / localhost).
• Use physical codes from the UI Events KeyboardEvent code Values list (e.g. KeyW).
• Related: language, ink, JavaScript hub.

💡 Best Practices