我想使用 JavaScript 到 select 的输入，当我将标签集中在按钮元素上并按 "Enter."

Question

这里的新开发人员正在努力适应 JavaScript/jQuery。

我目前正在开发一个带有选项卡的页面，该选项卡会根据选择的选项卡（按钮）随机播放我页面上的内容。这些选项卡基于以下代码：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>

我已经从它那里获得了我需要的所有功能，但突出的问题是我需要可以访问该功能。很容易将 tab-index=0 添加到按钮，以便可以通过制表符访问它们，但问题是 input 是需要制表符索引和“输入”的内容激活功能。我想这样做以便我可以使用 JS，这样当我专注于按钮并按下 enter 时，相应的按钮就会被激活。我假设它将使用 keydown 功能。我正在重新调整一些代码的用途，以便为我正在从事的另一个项目工作，但我想它看起来应该是这样的：

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

看起来应该是一个相对简单的解决方案，但我遇到了各种不同的错误。任何指导表示赞赏！

Answer 1

我无法在 codepen 示例中使用 Tab 键，因此很难测试该解决方案。但看来你是在正确的轨道上，我写了这个：

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

原来我的主要问题是我将 ID 添加到错误的 HTML 元素。调整 HTML 后，下面的代码有效。接下来，我将研究如何正确设置循环，以便减少函数的大小。

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

我想使用 JavaScript 到 select 的输入，当我将标签集中在按钮元素上并按 "Enter."

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

html

javascript

css

tabs

tabindex