How to simulate "Space" or "Enter" key on a focused button?

Question

On a focused button, when user hits "Space" or "Enter" key, browser will synthesise a click event on top of those keyboard events.

I tried to simulate keydown, keyup of a "Space" key on a focused button, but could not find the way to let browser synthesise a click event.

document.activeElement.dispatchEvent(new KeyboardEvent('keydown',{which: 32, keyCode: 32, key: ' ', code: 'Space'}));
document.activeElement.dispatchEvent(new KeyboardEvent('keyup',{which: 32, keyCode: 32, key: ' ', code: 'Space'}));

Here is what I got so far https://jsfiddle.net/s21f9pg7/

const btn = document.querySelector('#btn');

btn.onclick = function(e) {
  console.log('click', e.type);
}
btn.onkeydown = function(e) {
  console.log('keydown', e.type);
}
btn.onkeypress = function(e) {
  console.log('keypress', e.type);
}
btn.onkeyup = function(e) {
  console.log('keyup', e.type);
}

setTimeout(() => {
  btn.focus();
  document.activeElement.dispatchEvent(new KeyboardEvent('keydown', {
    which: 32,
    keyCode: 32,
    key: ' ',
    code: 'Space'
  }));
  /* document.activeElement.dispatchEvent(new KeyboardEvent('keypress',{which: 32, keyCode: 32, key: ' ', code: 'Space'})); */
  setTimeout(() => {
    document.activeElement.dispatchEvent(new KeyboardEvent('keyup', {
      which: 32,
      keyCode: 32,
      key: ' ',
      code: 'Space'
    }));
  }, 200);
}, 200)

<button id="btn">click</button>

This snippet issue a keydown and a keyup on a focused button, no click event was fired. However, if you manually hit space key, there will be a click event along with keyboard events.

I am trying to find a way to do unit testing on focused button. Thanks for help!

Related: https://stackoverflow.com/questions/961532/firing-a-keyboard-event-in-safari-using-javascript — A. Meshu, Apr 22 '20 at 23:30
My keyboard events were created and logged kind of as expected. I did not call any preventDefault either. — huocp, Apr 22 '20 at 23:35
@roko-c-buljan thanks for the added snippet! However, it seems it does not run inside the snippet? — huocp, Apr 22 '20 at 23:41
@huocp seens stack-snippets gets overloaded. Try to change `e` with `e.type` instead. `const btn = document.querySelector('#btn'); ['click','keydown','keypress','keyup'].forEach(n => btn.addEventListener(n, e => console.log(e.type))); btn.focus();` — Roko C. Buljan, Apr 22 '20 at 23:47
That's very related. I just want to know how to simulate that in code. ~~BTW I could not get btn.focus() to work in the above stackoverflow snippet editor.~~ NVM, the focus worked in Chrome, just not in Safari. — huocp, Apr 22 '20 at 23:54
@huocp did not wanted to add yet an answer, since I'm not sure if I'm in the right direction, but is this something you're looking forward to? https://jsfiddle.net/3qfk2wen/ ( - Again, related to my first comment about `Event.preventDefault()` I mistakenly erased....) — Roko C. Buljan, Apr 22 '20 at 23:58
If you look at your console, it did not log "click" (which I want browser to issue based on keyboard events). Also, the preventDefault missed the point, the only reason I add event handlers is to log. I am not using event handlers to alter behavour, what I want is to simulate a browser behaviour: issue click event based on keyboard events. — huocp, Apr 23 '20 at 00:09

How to simulate "Space" or "Enter" key on a focused button?

0 Answers0