在 blazor 组件中，焦点在输入文本中，如何使 tab 键将焦点移动到选项下拉列表？

Question

我在输入字段中输入了一些内容，选项变窄了。然后，通过按选项卡，焦点会跳过选项下拉菜单。我希望它跳转到选项列表。我在下面有一个示例。只能通过html属性来完成吗？如果没有，我怎么能在 blazor 中做到这一点？

我知道向上和向下键可以做到这一点。但我觉得 Tab 键更快更直观。

<input type="text" @bind="@newStudyCode" list="studies" autocomplete="on" placeholder="Search ..." />
<datalist id="studies">
        @if (Studies != null)
        {
            @foreach (var study in Studies)
            {
                <option value="@study.Code">@study.Code - @study.Title</option>
            }
        }
    </datalist>

编译后的html是这样的

<form>
  <input type="text" list="browsers" autocomplete="on" placeholder="Search ...">
  <datalist id="browsers">
            <option value="Firefox" tabindex="1">
                Firefox
            </option>
            <option value="Internet" tabindex="2">
                Internet
            </option>
            <option value="Chrome" tabindex="3">
                Chrome
            </option>
            <option value="Safari" tabindex="4">
                Safari
            </option>
  </datalist>
  <button type="submit">Push me</button>
</form> 

Answer 1

正如凯尔刚才所说，你只需要 tabindex

 <input type="text" @bind="@newStudyCode" list="studies" autocomplete="on" placeholder="Search ..." /> 
    <datalist id="studies"> 
       @if (Studies != null) 
          { 
            var i =1;
            @foreach (var study in Studies) 
               { 
                  <option value="@study.Code" tabindex="@i">
                    @study.Code - @study.Title
                  </option
                  i++;
               }
            } 
      </datalist>

Answer 2

这可以通过使用常规的 html tabindex 属性来完成。 blazor 不需要什么特别的东西。

例子：

<a href="https://www.w3schools.com/" tabindex="2">W3Schools</a>
<a href="http://www.google.com/" tabindex="1">Google</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

请看这里： https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex