Trigger click event on keypress for any focused element

Question

Is there a default way to trigger a click event anytime enter is pressed on a focused element?

What I am referencing is the differences from pressing enter while focused on a <button> vs. pressing enter while focused on a <div> <li> <span>, etc. The <button> keypress enter triggers as expected. However, <div> keypress enter does nothing. I believe you have to specifically write the event in for that keypress.

$('li').click(function() {  
    //toggles something 
});

$("li").keydown(function(e){
    if(e.which === 13){
        $(this).click();
    }
});

Possible duplicate of https://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript or https://stackoverflow.com/questions/2381572/how-can-i-trigger-a-javascript-event-click ? — Douglas Gaskell, Feb 03 '17 at 23:02
Possible duplicate of [Is it possible to focus on a
using javascript focus() function?](http://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function) — DavidDomain, Feb 03 '17 at 23:09
I am not posting this an answer, because it does not answer your question. Instead it answers the problem the spawned your question — mis-use of non-interactive elements. http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html — aardrian, Feb 04 '17 at 00:18

score 15 · Accepted Answer · answered Feb 04 '17 at 17:32

Is there a default way to trigger a click event anytime enter is pressed on a focused element?

There's no solution without javascript.

Although the onclick has a special behavior as the W3C mentions

While "onclick" sounds like it is tied to the mouse, the onclick event is actually mapped to the default action of a link or button.

this does not work with other elements than links and buttons.

You could be tempted to add role="button" to a div with a tabindex="0". This does not work.

The Mozilla documentation explicitely says that you have to define handler, even with the button role.

This is easily understandable as this is a browser feature. When you define role=link on an element, you can't right click on it, hoping that it will open your browser context menu. For the same reason, defining the role=button attribute won't affect the default behavior. From this discussion:

ARIA simply conveys the accessibility semantics intended by the author that are conveyed to an assistive technology.

Also do not forget to handle the space key. Read Karl Groves article and example about the subject.

score 7 · Answer 2 · answered Jun 01 '20 at 22:46

If the elements on your page already have click events, and are in the tab order, and you just want to make the enter key trigger a click on whichever element has focus for accessibility, try the following:

<head>
  <script>
  function handleEnter(e){
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if (keycode == '13') {
      document.activeElement.click();
    }
  }
  </script>
</head>

<body onkeypress="handleEnter(event)">

This is especially useful for adding play/pause and making other image based controls accessible in banner ads made with Google Web Designer.

score 1 · Answer 3 · edited Feb 04 '17 at 13:09

1

Certain HTML Elements such as span, li, div doesn't not have really have a focused state hence the focus won't trigger. What can be done in order to give the element a possible focus state is to add a tabindex and it will work, e.g:

<div tabindex="0"></div>

edited Feb 04 '17 at 13:09

Adam

17,838
32
54

answered Feb 03 '17 at 23:08

Mathias W

1,433
12
16

Never use a `tabindex` value greater than 0. http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html – aardrian Feb 03 '17 at 23:55
6

Even with tabindex=0 this does not work without specifically intercepting the keyboard event – Adam Feb 04 '17 at 13:15
2

+1 to @Adam's comment, You still need to script it no matter what you do. Also, whomever edited the answer to make the `tabindex` 0 instead of 1, good idea. – aardrian Feb 04 '17 at 18:36
1

What is the problem with tabindex greater than 0? – Ifedi Okonkwo May 24 '17 at 07:44

score 0 · Answer 4 · answered Feb 04 '17 at 02:44

0

When I listen for keyboard events on a list, I put the handler on the <ul> instead of the <li> and it works great. It might work on the <li> as well but your example above sounds like it doesn't.

answered Feb 04 '17 at 02:44

slugolicious

15,824
2
29
43

Trigger click event on keypress for any focused element

4 Answers4