javascript - 通过 Tab 键上的 jquery 聚焦到图像按钮不起作用

Question

HTML:

<div class="large-9 columns">
  <input type="text" class="txtsearchbox" name="txtsearch" id="txtsearch" placeholder="Search" />
</div>
<div class="large-3 columns">
  <a class="button expand" id="btnsearch1">
  <img src="/Content/Images/search-16x16.png" id="btnsearch" /></a>
</div>

JS:

 $('#txtsearch').on('keydown', function (e) {
        //debugger;
        var keyCode = (window.event) ? e.which : e.keyCode;
        if (keyCode == 9) {
            e.preventDefault();
            $('#btnsearch1').focus();
          //  console.log(e.target.href);
        }
    });

这里我有一个文本框和图像按钮。在 Tab 键上按下焦点没有移动或显示在图像按钮上。我没有得到确切的问题。

Answer 1

删除 javascript，只需将 tabindex="0"添加到 "a"标签。

<div class="large-9 columns">
    <input type="text" class="txtsearchbox" name="txtsearch" id="txtsearch" placeholder="Search" />
</div>
<div class="large-3 columns">
    <a tabindex="0" class="button expand" id="btnsearch1">
        <img src="/Content/Images/search-16x16.png" id="btnsearch" />
    </a>
</div>