我想在选项卡上将焦点放在按钮元素上并按“Enter”时，使用 JavaScript 来选择输入

如何解决我想在选项卡上将焦点放在按钮元素上并按“Enter”时，使用 JavaScript 来选择输入

这里的新开发人员试图熟悉 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 很容易，以便可以通过 Tab 键访问它们，但问题是 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();
    }
});

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

解决方法

我无法在 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);
        }
    });
}

,

事实证明，我的主要问题是我将 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();
        }
    });
});