TabIndex错误的序列顺序

Question

我的tabindex路线的顺序有点问题。从理论上讲，我只需要点击Tab键就可以从一个元素跳到另一个元素，但它不会

我有以下HTML代码：

<div>
  <input class="location_input_inrest_dish_pages" type="text" placeholder="Look up for a city" id="myAnchor1">
  <a href="#" title="Search" id="myAnchor2">
    <button class="search_icon_container" >
      <p class="go_text_in_search">Go!</p>
      <img class="search_icon_restpage" src="../../static/wm/images\searchicon_30x30_red.png">
    </button>
  </a>
  <a href="#" title="Locate me!">
    <div class="around_me_icon_container">
      <img class="locateme_icon" src="../../static/wm/images\target_30x30_whitev1.png">
    </div>
  </a>
</div>
<div class="large_map_in_restaurants">
  <div id="map">
  </div>

并在文档末尾跟随JS：

<script>
function myFunction() {
document.getElementById("myAnchor1").tabIndex = "1";
document.getElementById("myAnchor2").tabIndex = "2";
}
</script>

我使用了this位的JS试图控制标签的“路径”，这样当我在Input元素上时，当按下标签键时，我将直接降落在标签上“走！” button，然后我可以按回车键。

然而，我遇到的问题是，从input元素开始，我需要在button元素上“登陆”之前按Tab键两次，相反，或者只是一次击中......如你所料。