I want to use JavaScript to select an input when I'm tab focused on a button element and press "Enter."

Question

New dev here trying to get comfortable with JavaScript/jQuery.

I'm currently developing a page with tabs that shuffles content on my page based on which tab (button) is selected. The tabs are based on this code: https://codepen.io/broskibro/pen/VwKRmKQ

  <input type="radio" id="tab1" name="tab-control" checked>
  <input type="radio" id="tab2" name="tab-control">
  <ul>
    <li id="list1" title="Job Seeker"><label tabindex="0" class="btn lg" for="tab1" role="button">
      <br><span>Job Seeker</span></label></li>
    <li id="list2" title="Employer"><label tabindex="0" class="btn lg" for="tab2" role="button">
        <br><span>Employer</span></label></li>
  </ul>

I've gotten all the functionality that I need from it, but the outstanding issue is that I need the feature to be accessible. It's easy enough to add tab-index=0 to the buttons so that they can be reached via tabbing, but the problem is that the input is what needs to be tab-indexed to and "Enter-ed" to actually activate the functionality. I want to make it so that I can use JS so that when I'm focused on the buttons and I press enter, the respective is activated. I'm assuming it will be something using the keydown feature. I'm repurposing some code I got to work for another project I was working on, but I imagine it would look something like:

var input = document.getElementById("list1")
input.addEventListener("keydown", function(event) {
    if (event.key == 'Enter') {
        // Trigger the click for the input     
        document.getElementById("tab1").click();
    }
});

It looks like it should be a relatively easy solution but I'm getting a variety of different errors. Any guidance is appreciated!

the keyCode for the Enter key is 13 - have you tried that? Also, have you considered also using a mouseover function - the user may not always use tabbing... — Rachel Gallen, Mar 16 '21 at 19:57

Tore · Answer 1 · 2021-03-16T19:58:11.513

1

I can't get tabbing to work in the codepen example, so its difficult to test the solution. But it seems like you are on the right track, I wrote up this:

var input = document.getElementsByTagName("input");
for (var i = 0; i < input.length; i++) {
    input[i].addEventListener("keydown", function(event) {
        if (event.key == 'Enter') {
            // Trigger the click for the input 
            var clickEvent = new MouseEvent("click", {
                "view": window,
                "bubbles": true,
                "cancelable": false
            });
    
            document.getElementById("tab" + i).dispatchEvent(clickEvent);
        }
    });
}

edited Mar 16 '21 at 19:58

answered Mar 16 '21 at 19:46

Tore

1,236
2
11
21

Ahh, your method makes it so that I don't have to duplicate my code and the snippet will automatically click the corresponding input. That's great! Unfortunately, the click event still isn't happening. – Mance Rah Mar 16 '21 at 19:53
Looks like we need to trigger a programmatic click differently - see https://stackoverflow.com/questions/809057/how-do-i-programmatically-click-on-an-element-in-javascript - updating my answer – Tore Mar 16 '21 at 19:57

score 0 · Accepted Answer · answered Mar 17 '21 at 18:29

So it turns out that my major issue was that I was adding IDs to the wrong HTML elements. After adjusting the HTML, the code below works. Next, I'll look into properly setting up a loop so that I can reduce the size of my function.

<input type="radio" id="tab1" name="tab-control" checked>
  <input type="radio" id="tab2" name="tab-control">
  <ul>
    <li title="Job Seeker"><label id="slide1" tabindex="0" class="btn lg" for="tab1" role="button">
      <br><span>Job Seeker</span></label></li>
    <li title="Employer"><label id="slide2" tabindex="0" class="btn lg" for="tab2" role="button">
        <br><span>Employer</span></label></li>
  </ul>

document.addEventListener( 'DOMContentLoaded', function() {
    const list1 = document.getElementById("slide1");
    const output1 = document.querySelector("#tab1");
    const list2 = document.getElementById("slide2");
    const output2 = document.querySelector("#tab2");

    list1.addEventListener("keydown", function(event) {
        if (event.key == 'Enter') {
            // Trigger the click for the input
            output1.click();
        }
    });

    list2.addEventListener("keydown", function(event) {
        if (event.key == 'Enter') {
            // Trigger the click for the input
            output2.click();
        }
    });
});

I want to use JavaScript to select an input when I'm tab focused on a button element and press "Enter."

2 Answers2