DOM Event - Keydown

About

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

When a key does up, there is a keyup event

Attach

You can attach it to all element.

element.onkeydown = logger();
element.addEventListener('keydown', logger());
<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

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;
    }

  }
}
parent.document.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:

  • The global variable that holds the state of the scroll
let blockScroll = false;
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();
   
}
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:

Powered by ComboStrap