How can I trigger button click on key press?

Question

Suppose I have the following 3 buttons:

<div role="button" class="ico-btn">
  Button A
</div>
<div role="button" class="ico-btn">
  Button B
</div>
<div role="button" class="ico-btn">
  Button C
</div>

Is there any way to trigger Button A by pressing the A key on the keyboard, or Button B by pressing the B key on the keyboard, etc.? Something like an attribute keypress="A" to make things more accessible?

something like this- https://stackoverflow.com/questions/979662/how-to-detect-pressing-enter-on-keyboard-using-jquery — Vibs, May 27 '20 at 10:11
The duplicate has your answer. It's regarding listening for the Return key, but the pattern is the same. Hook the event handler and interrogate the event to determine what key was pressed. — Rory McCrossan, May 27 '20 at 10:13
@Olian04 Where did he say it did? The OP has tagged it so I don't see his suggestion as unreasonable. — Rory McCrossan, May 27 '20 at 10:13
@RoryMcCrossan my bad. I missed that the question was tagged with jQuery. — Olian04, May 27 '20 at 10:15

score 0 · Answer 1 · answered May 27 '20 at 10:17

This can be done fairly easily with delegated event listeners:

// listen for keys
document.addEventListener('keyup', function(event){

    // all divs with the attribute data-listening_key
    var elems = document.querySelectorAll('div[data-listening_key]');
    elems.forEach(function(element, index){

        // if the one it's listening for matches this event
        var listening_key = element.dataset.listening_key;
        if(listening_key === event.key){
            var clickEvent = new Event('click'); // create and dispatch a click to it!
            element.dispatchEvent(clickEvent);
        }
    });
});

<div data-listening_key='x' onclick="console.log('Button A clicked')">
    Button A
</div>
<div data-listening_key='y' onclick="console.log('Button B clicked')">
    Button B
</div>
<div data-listening_key='z' onclick="console.log('Button C clicked')">
    Button C
</div>

brk · Answer 2 · 2020-05-27T10:35:13.403

You can addEventListener to document and check keyCode. For A it is 65

document.getElementById('btnA').addEventListener('click', triggerA)

// function which will trigger on click of A
// So dirctly clicking A this function will trigger. 
// This is just for validation
function triggerA() {
  console.log('A')
}

document.body.addEventListener('keyup', function(e) {
  if (e.keyCode === 65) {
    // on press of A the div#btnA is getting clicked
    document.getElementById('btnA').click();
  }
})

.ico-btn {
  border: 1px solid yellow;
  border-radius: 2px;
  margin: 5px;
}

<div role="button" class="ico-btn" id='btnA'>
  Button A
</div>
<div role="button" class="ico-btn">
  Button B
</div>
<div role="button" class="ico-btn">
  Button C
</div>

How can I trigger button click on key press?

2 Answers2