JavaScript KeyboardEvent : UIEvent

Instance Properties

altKey : Boolean readonly

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

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:

ctrlKey : Boolean readonly

Returns true if the keyboard's control key is pressed.

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:

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.

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.

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:

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