focus to image button through jquery on Tab key press not working

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

Here i have one textbox and image button .On Tab key press focus is not shifing or shown on image button ..Am am not getting what the exact problem.

Answer 1

Remove the javascript and just add tabindex="0" to "a" tag.

<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>