DOM Event - Keydown

About

A Keydown is an input device event that tracks when a key goes down on the keyboard.

Attach

You can attach it to all element.

• DOM Event Handler - On Properties with Javascript (Interface Definition Language - IDL )

element.onkeydown = logger();

• DOM - Event Listener

element.addEventListener('keydown', logger());

• What are the HTML On Attributes ? (known also as event handler content attributes)

<input tabindex="0" onkeydown="logger(this)" />

Example

Creating Keyboard Shortcut

This is also possible to create advanced accesskey (ie keyboard shortcut)

• A simple search input form where we want to focus on

<form id="search-form">
     <span id="search-input-container">
          <input type="search" id="search-input" placeholder="Search ..." aria-label="Search for...">
     </span>
</form>

• The javascript listen to keydown and if the control key and the key / are the one, we focus on the input

var searchInput = document.getElementById('search-input');
// window.parent because this code run in a iframe, otherwise just document
window.parent.addEventListener('keydown', function(event) {
        event.ctrlKey && event.key === '\\' && (event.preventDefault(),searchInput.focus())
})

• Click Ctrl+\ to focus on the input element

a

Keylogger (Track)

Example of a keylogger code that track keys on the document.

var KEYCODE = {
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39,
    SPACE: 32,
    UP: 38
}

function keyTracking(event) {
  var type = event.type;

  if(type === "keydown"){
    var node = event.currentTarget;

    switch (event.keyCode) {
      case KEYCODE.DOWN:
	console.log("Down Arrow");
        break;
      case KEYCODE.RIGHT:
        console.log("Right Arrow");
        break;
      case KEYCODE.UP:
	console.log("Up Arrow");
        break;
      case KEYCODE.LEFT:
        console.log("Left Arrow");
        break;
      case KEYCODE.SPACE:
        console.log("Space");
        break;
      default:
        console.log("The key code of this key is "+event.keyCode+" - "+event.key);
        break;
    }

  }
}
// window.parent because this code run in a iframe, otherwise just document
window.parent.addEventListener('keydown', keyTracking);

• Just type a key.

Block Scrolling

To block the default navigation of an key arrow up or down event (ie scrolling), you need to prevent it.

The below example shows two callback function registration:

• an DOM - Event Listener to enable/disable the keydown event default behavior
• an handler for the click on the button to enable/disable scrolling

• The global variable that holds the state of the scroll

let blockScroll = false;

• The callback function for the click event on the button

function setBlockScroll(element){
   
   if (blockScroll) {
     blockScroll = false;
     element.innerHTML = "Disable Up and Down Key";
   } else {
     blockScroll = true;
     element.innerHTML = "Enable Up and Down Key";
   }
   // To take the focus from the button back to the window
   parent.window.focus();
   
}

• The callback function to handle the keydown event registered as an event listener

var KEYCODE = {
    DOWN: 40,
    UP: 38
}
parent.document.addEventListener("keydown", function (e) {
  if([KEYCODE.DOWN, KEYCODE.UP].includes(e.keyCode) > -1){
    if (blockScroll) {
       e.preventDefault();
       console.log("The down or up arrow default behavior was prevented. You don't move anymore");
    } else {
        console.log("The down or up arrow default behavior should work. You scroll down/up");
    }
  }
}, false);

• The HTML (description and button)

<ul>
<li>Enable or disable the scroll with the button</li>
<li>Press the down or up arrow to see if the scrollbar will go up or down</li>
</ul>
<button id="the-button" onClick="setBlockScroll(this)">Disable Up and Down Key</button>

• Result:

Library

This library wraps this event

• https://github.com/ccampbell/mousetrap
• https://github.com/madrobby/keymaster