DOM Event - Keydown

Devtool Chrome Event Listener

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)

<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:

  • 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:

Library

This library wraps this event





Discover More
Scroll Bar
Browser - Scroll

This page is scrolling in the internet context (http, html, javascript). Scrolling is implemented by the browser in response to: user interaction (scrollbar, click) or Javascript code. Via...
Devtool Chrome Event Listener
DOM - Event Type (name)

An event is categorize by its type which is a property of the event object The type of an event is also known as the name of the event (Ref)...
Devtool Chrome Event Listener
DOM Event - Keydown

A Keydown is an input device event that tracks when a key goes down on the keyboard. keyup You can attach it to all element. This is also possible to create advanced accesskey (ie...
Devtool Chrome Event Listener
DOM Event - Keyup

keyup is an event that occurs when the key of the keyboard goes up. keydown
Devtool Chrome Event Listener
DOM Event - Scroll

scroll is an view event that happens when the user scroll keydown block A function that tells when the element is visible (in the view port) Scroll is a really sensitive and CPU intensive function....
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
Devtool Chrome Event Listener
Event - Category

event type are categorized further in category. Form Event Focus Event Input Devices Event View Events Example non-normative. Category Event Type Form Event submit Focus Event focus,...
HTML - Accesskey Attribute (keyboard shortcut)

All HTML elements may have the accesskey content attribute set. The accesskey attribute's value is used by the user agent as a guide for creating a keyboard shortcut that focuses (ie activates) the...
HTML - Keyboard Navigation (key event)

Navigation / Manipulation of an HTML document with the keys of a keyboard. The tab key is the default key that permits to move from a interactive element to another and therefore change the focus...
Card Puncher Data Processing
Session Replay script - Key, Mouse logger

Session replay scripts are used by companies to gain insight into how their customers are using their sites and to identify confusing webpages They captures key pressed. Example with the keydown event...



Share this page:
Follow us:
Task Runner