Trigger Keyboard Click via Javascript

Question

Jquery/Javascript event trigger does not seem to trigger the active element.

I have a play/pause button and am trying to toggle between them via Javascript. When using my physical keyboard and hit the Enter key, I see that it toggles between them. When trying to trigger it via code, it seems to not actually do anything.

A few things I have tried:

jQuery.event.trigger({type: 'keyup', which : 13});

jQuery.event.trigger({type: 'keydown', which : 13});

document.activeelement.dispatchEvent(new KeyboardEvent('keypress',{'key':'enter'}));

I would think one of these would actually act like the enter key and press the play/pause.

Any ideas?

Actual keystrokes can not be triggered in JavaScript. Instead, just initiate the action(s) that would have been initiated if the keystroke had occurred. — Scott Marcus
– Scott Marcus, Commented Jan 22, 2019 at 20:23
One thing to add, it could be any button, not just play/pause. Was wondering if there was a way to do it on document.activeelement? — sql-noob
– sql-noob, Commented Jan 22, 2019 at 21:50

Siavas · Accepted Answer · 2019-01-22 20:41:51Z

1

For triggering a specific keypress, create a jQuery keypress Event, set which key to emulate, and trigger the created event on your DOM object, which could be your player.

var e = $.Event('keypress');
e.which = 13; // Enter key
$('#my-player').trigger(e);

As @ScottMarcus mentioned in the comment, a better idea would be to trigger the actions taken by your keypress event and not the event itself. For example, if you have the following event set:

$('#my-player').keypress(function(e) {
  if (e.which == 13) {
    togglePlayButton();
  }
});

You could instead call togglePlayButton(); directly where you'd like to emulate the keypress. Do not sacrifice code clarity just for that though.

answered Jan 22, 2019 at 20:41

Siavas

5,1102 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sql-noob Over a year ago

One thing to add, it could be any button, not just play/pause. Was wondering if there was a way to do it on document.activeelement?

Siavas Over a year ago

@sql-noob are you looking for pressing enter and triggering the keypress event of the active element on the page?

Collectives™ on Stack Overflow

Trigger Keyboard Click via Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related