Demo of the JavaScript keydown Event

Type in the input. The status shows the pressed key. The copied value demonstrates that keydown happens before the browser finishes inserting the new character into the field.

Type here

Value seen during keydown

JavaScript

const source = document.getElementById('t1');
const output = document.getElementById('t2');

source.addEventListener('keydown', (event) => {
  output.value = source.value;
  console.log(event.key);
});

For the updated text after insertion, prefer the input event or keyup.

← Return to keydown tutorial