How to capture keyboard inputs like Windows explorer

Question

I have custom dropdown select and capturing keydown event which triggers an event for each input pressed on keyboard.

document.addEventListener('keydown', (event) => {
  const keyName = event.key;
  console.log('keydown event\n\n' + 'key: ' + keyName);
}); 

Pressing "t" and "w" triggers event two successive events. But I need to capture "tw" as my search term then highlight it in dropdown. (Or) Just I need to capture all keys pressed continuously.

I am looking for something in Windows explorer where quickly pressing "d" & "e" highlights "Dev Tools".

How to capture these in JavaScript with proper timeout or something?

Answer 1

Maybe like this:

let pressed = [];
let timeoutId;

document.addEventListener('keypress', e => {
  pressed.push(e.key);

  if (timeoutId) {
    clearTimeout(timeoutId);
  }

  timeoutId = setTimeout(() => {
    console.log(pressed.join(''));
    pressed = [];
  }, 400); //300-400ms timeout is optimal
});