KeyboardEvent : UIEvent

constructor

Event containing information about key presses. See Keyboard Event Demo.

Constructors

new KeyboardEvent(type : String, [eventInit : Object]) : MouseEvent

eventInit : {

key :	String
code :	String
location :	Number
repeat :	Boolean
isComposing :	Boolean
ctrlKey :	Boolean
shiftKey :	Boolean
altKey :	Boolean
metaKey :	Boolean
modifierAltGraph :	Boolean
modifierCapsLock :	Boolean
modifierFn :	Boolean
modifierFnLock :	Boolean
modifierHyper :	Boolean
modifierNumLock :	Boolean
modifierScrollLock :	Boolean
modifierSuper :	Boolean
modifierSymbol :	Boolean
modifierSymbolLock :	Boolean
view :	Window
detail :	Number
bubbles :	Boolean
cancelable :	Boolean
composed :	Boolean

}

Creates a new KeyboardEvent of the specified type and initial properties.

Spec

Instance Properties

altKey : Boolean readonly

Returns true if the keyboard's alt (Option on Mac) key is pressed. See also getModifierState().

Example:

<input id='input'>
<div>altKey: <span id='output'>false</span></div>
<script>
  var input = document.getElementById('input');
  var output = document.getElementById('output');

  input.onkeydown = input.onkeyup = function(event) {
    output.textContent = event.altKey;
  };
</script>

Run

Results:

charCode : Number readonly

The effective character. Only valid for keypress events. Use String.fromCharCode() to get a string version of the pressed character.

Example:

<input id='input'>
<div>charCode: <span id='charCodeOutput'></span></div>
<div>string: <span id='stringOutput'></span></div>
<script>
  var input = document.getElementById('input');
  var charCodeOutput = document.getElementById('charCodeOutput');
  var stringOutput = document.getElementById('stringOutput');

  input.onkeypress = function(event) {
    charCodeOutput.textContent = event.charCode;
    stringOutput.textContent = "'" + String.fromCharCode(event.charCode) + "'";
  };
</script>

Run

Results:

code : String readonly

Example:

<input id='input'>
<div>key: <span id='keyOutput'></span></div>
<div>code: <span id='codeOutput'></span></div>
<script>
  var input = document.getElementById('input');
  var keyOutput = document.getElementById('keyOutput');
  var codeOutput = document.getElementById('codeOutput');

  input.onkeydown = function(event) {
    keyOutput.textContent = event.key;
    codeOutput.textContent = event.code;
    event.preventDefault();
  };
</script>

Run

Results:

Spec

ctrlKey : Boolean readonly

Returns true if the keyboard's control key is pressed. See also getModifierState().

Example:

<input id='input'>
<div>ctrlKey: <span id='output'>false</span></div>
<script>
  var input = document.getElementById('input');
  var output = document.getElementById('output');

  input.onkeydown = input.onkeyup = function(event) {
    output.textContent = event.ctrlKey;
  };
</script>

Run

Results:

key : String readonly

Example:

<input id='input'>
<div>key: <span id='keyOutput'></span></div>
<div>code: <span id='codeOutput'></span></div>
<script>
  var input = document.getElementById('input');
  var keyOutput = document.getElementById('keyOutput');
  var codeOutput = document.getElementById('codeOutput');

  input.onkeydown = function(event) {
    keyOutput.textContent = event.key;
    codeOutput.textContent = event.code;
    event.preventDefault();
  };
</script>

Run

Results:

Spec

keyCode : Number readonly

Example:

<input id='input'>
<div>keyCode: <span id='keyCodeOutput'></span></div>
<div>which: <span id='whichOutput'></span></div>
<script>
  var input = document.getElementById('input');
  var keyCodeOutput = document.getElementById('keyCodeOutput');
  var whichOutput = document.getElementById('whichOutput');

  input.onkeydown = function(event) {
    keyCodeOutput.textContent = event.keyCode;
    whichOutput.textContent = event.which;
    event.preventDefault();
  };
</script>

Run

Results:

location : Number readonly

One of DOM_KEY_LOCATION_STANDARD, DOM_KEY_LOCATION_LEFT, DOM_KEY_LOCATION_RIGHT, DOM_KEY_LOCATION_NUMPAD.

Example:

<input id='input'>
<div>location: <span id='output'></span></div>
<script>
  var input = document.getElementById('input');
  var output = document.getElementById('output');

  var locationNames = {};
  Object.keys(KeyboardEvent).filter(function(name) { 
    return name.indexOf('DOM_KEY_LOCATION_') === 0;
  }).forEach(function(name) {
    locationNames[KeyboardEvent[name]] = name;
  });

  input.onkeydown = input.onkeyup = function(event) {
    output.textContent = locationNames[event.location];
  };
</script>

Run

Results:

metaKey : Boolean readonly

Returns true if the keyboard's meta (Command on Mac, the Windows logo key in some PC browsers) key is pressed. See also getModifierState().

Example:

<input id='input'>
<div>metaKey: <span id='output'>false</span></div>
<script>
  var input = document.getElementById('input');
  var output = document.getElementById('output');

  input.onkeydown = input.onkeyup = function(event) {
    output.textContent = event.metaKey;
  };
</script>

Run

Results:

repeat : Boolean readonly

Returns true if the key event was generate by the user holding the key down.

Example:

<input id='input'>
<div>repeat: <span id='output'>false</span></div>
<script>
  var input = document.getElementById('input');
  var output = document.getElementById('output');

  input.onkeydown = input.onkeyup = function(event) {
    output.textContent = event.repeat;
  };
</script>

Run

Results:

shiftKey : Boolean readonly

Returns true if the keyboard's shift key is pressed. See also getModifierState().

Example:

<input id='input'>
<div>shiftKey: <span id='output'>false</span></div>
<script>
  var input = document.getElementById('input');
  var output = document.getElementById('output');

  input.onkeydown = input.onkeyup = function(event) {
    output.textContent = event.shiftKey;
  };
</script>

Run

Results:

which : Number readonly

Example:

<input id='input'>
<div>keyCode: <span id='keyCodeOutput'></span></div>
<div>which: <span id='whichOutput'></span></div>
<script>
  var input = document.getElementById('input');
  var keyCodeOutput = document.getElementById('keyCodeOutput');
  var whichOutput = document.getElementById('whichOutput');

  input.onkeydown = function(event) {
    keyCodeOutput.textContent = event.keyCode;
    whichOutput.textContent = event.which;
    event.preventDefault();
  };
</script>

Run

Results:

Instance Methods

getModifierState(modifierKey : String) : Boolean

Returns true if the the modifierKey is pressed or active. modifierKey must be one of 'Alt', 'AltGraph', 'CapsLock', 'Control', 'Fn', 'Meta', 'NumLock', 'ScrollLock', 'Shift', or 'SymbolLock'.

Spec

KeyboardEvent Properties

DOM_KEY_LOCATION_LEFT : Number readonly value = 1

DOM_KEY_LOCATION_NUMPAD : Number readonly value = 3

DOM_KEY_LOCATION_RIGHT : Number readonly value = 2

DOM_KEY_LOCATION_STANDARD : Number readonly value = 0

home license contribute feedback toggle light/dark mode