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

Question

我在输入字段中输入了一些东西，选项缩小了。然后，通过按 tab 键，焦点跳过选项下拉列表。我希望它跳转到选项列表。我在下面有一个示例。可以仅通过 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

正如凯尔刚才所说，你只需要标签索引

<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

这可以使用常规的htmltabindex属性来完成。对于西装外套来说没有什么特别的。

例：

<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