我想使用 JavaScript 到 select 输入，当我将选项卡聚焦在按钮元素上并按“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!

Answer 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);
        }
    });
}

Answer 2

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();
        }
    });
});