Keyboard

{{SeeCompatTable}} {{APIRef("Keyboard API")}} {{securecontext_header}} 

The Keyboard interface of the {{domxref("Keyboard API", "", "", "nocode")}}  provides functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.

A list of valid code values is found in the UI Events KeyboardEvent code Values spec.

{{InheritanceDiagram}} 

Instance properties

Also inherits properties from its parent interface, {{DOMxRef("EventTarget")}} .

Instance methods

Also inherits methods from its parent interface, {{DOMxRef("EventTarget")}} .

• {{domxref('Keyboard.getLayoutMap()')}}  {{experimental_inline}} 
  • : Returns a {{jsxref('Promise')}}  that resolves with an instance of {{domxref('KeyboardLayoutMap')}}  which is a map-like object with functions for retrieving the strings associated with specific physical keys.
• {{domxref('Keyboard.lock()')}}  {{experimental_inline}} 
  • : Returns a {{jsxref('Promise')}}  that resolves after enabling the capture of keypresses for any or all of the keys on the physical keyboard.
• {{domxref('Keyboard.unlock()')}}  {{experimental_inline}} 
  • : Unlocks all keys captured by the lock() method and returns synchronously.

Example

Keyboard mapping

The following example demonstrates how to get the location- or layout-specific string associated with the key that corresponds to the ‘W’ key on an English QWERTY keyboard.

if (navigator.keyboard) {
  const keyboard = navigator.keyboard;
  keyboard.getLayoutMap().then((keyboardLayoutMap) => {
    const upKey = keyboardLayoutMap.get("KeyW");
    window.alert(`Press ${upKey} to move up.`);
  });
} else {
  // Do something else.
}

Keyboard locking

The following example captures the W, A, S, and D keys, call lock() with a list that contains the key code attribute value for each of these keys:

navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);

This captures these keys regardless of which modifiers are used with the key press. Assuming a standard United States QWERTY layout, registering KeyW ensures that W, Shift+W, Control+W, Control+Shift+W, and all other key modifier combinations with W are sent to the app. The same applies to for KeyA, KeyS, and KeyD.

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}}