AngularJS指令中的Tabindex

我编写了一个指令，它生成一个包含一些行的表。每行都有一些下拉列表供选择，还有一些普通文本区域用于填充信息。 问题是，当我点击键盘上的tab键时，下拉选择被忽略，并且没有聚焦。光标跳到下一个文本区域。我尝试在每一行的列中使用incrementaltabindex属性来解决这个问题，但仍然没有任何区别。 每行的每一列都是在指令内部通过使用ng repeat在数组上循环生成的。下面将生成一个下拉列表：

<td><ng-select ng-model="oneRow.XItem" ng-options="opt.name as opt.name for opt in selections.XItemList| orderBy:'name'" cs-option-init=""></ng-select></td>

以下操作生成一个文本区域，通过按键盘上的tab键来聚焦该区域

  <td><ng-input ng-model="oneRow.YItem" ></ng-input></td>

请注意，所有在指令中生成的内容都不是静态HTML。

---

这幅画描绘了桌子。通过点击tab键，光标跳到同一行或下一行中的下一个可能的文本区域

不确定您在这里描述的是什么行为。但是，默认情况下，HTML将从左到右对字段进行正确格式的制表，然后继续下一行

选项卡将允许用户将焦点放在“下一个”表单字段上，但是，一旦下拉菜单具有焦点，则使用向上/向下箭头键选择选项。选择一个选项后，再次按tab键将移动到下一个表单字段

如果跳过了某些内容，我会检查您的HTML语法

即使通过angular，DOM也是DOM。如果表单字段的语法在表中正确，它将使用制表符正确处理

非anglar示例，因为如果不强制tabindex，则使用anglar应该不会对Tab产生任何影响：

沃沃萨巴梅塞德沙特
萨尔马达姆先生
1234
5555444433332222
沃沃萨巴梅塞德沙特
萨尔马达姆先生
1234
5555444433332222

建议： 1） 检查表单字段的语法是否正确。

---

2） 在每个字段中使用tabindex=“0”（强制在页面的自然顺序内停止制表符）或完全删除tabindex。

不确定您在此处描述的行为。但是，默认情况下，HTML将从左到右对字段进行正确格式的制表，然后继续下一行

选项卡将允许用户将焦点放在“下一个”表单字段上，但是，一旦下拉菜单具有焦点，则使用向上/向下箭头键选择选项。选择一个选项后，再次按tab键将移动到下一个表单字段

如果跳过了某些内容，我会检查您的HTML语法

即使通过angular，DOM也是DOM。如果表单字段的语法在表中正确，它将使用制表符正确处理

非anglar示例，因为如果不强制tabindex，则使用anglar应该不会对Tab产生任何影响：

沃沃萨巴梅塞德沙特
萨尔马达姆先生
1234
5555444433332222
沃沃萨巴梅塞德沙特
萨尔马达姆先生
1234
5555444433332222

建议： 1） 检查表单字段的语法是否正确。 2） 在每个字段中使用tabindex=“0”（强制在页面的自然顺序内停止制表符）或完全删除tabindex

<form>
<table style="width:75%">
  <tr>
    <td><select id="tableDropdown-useNgRepeatIndexHere0"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option>
</select></td>
    <td><select id="tableDropdown-useNgRepeatIndexHere1"><option value="volvo">mr</option><option value="saab">mrs</option><option value="mercedes">Sir</option><option value="audi">Madame</option>
</select></td>
    <td><select id="tableDropdown-useNgRepeatIndexHere2"><option value="volvo">1</option><option value="saab">2</option><option value="mercedes">3</option><option value="audi">4</option>
</select></td>
    <td><input id="tableDropdown-useNgRepeatIndexHere4"></td>
    <td><input id="tableDropdown-useNgRepeatIndexHere5"></td>
    <td><select id="tableDropdown-useNgRepeatIndexHere6"><option value="volvo">5555</option><option value="saab">4444</option><option value="mercedes">3333</option><option value="audi">2222</option>
</select></td>
    <td><input id="tableDropdown-useNgRepeatIndexHere7"></td>
  </tr><tr>
    <td><select id="tableDropdown-useNgRepeatIndexHere8"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option>
</select></td>
    <td><select id="tableDropdown-useNgRepeatIndexHere9"><option value="volvo">mr</option><option value="saab">mrs</option><option value="mercedes">Sir</option><option value="audi">Madame</option>
</select></td>
    <td><select id="tableDropdown-useNgRepeatIndexHere10"><option value="volvo">1</option><option value="saab">2</option><option value="mercedes">3</option><option value="audi">4</option>
</select></td>
    <td><input id="tableDropdown-useNgRepeatIndexHere11"></td>
    <td><input id="tableDropdown-useNgRepeatIndexHere12"></td>
    <td><select id="tableDropdown-useNgRepeatIndexHere13"><option value="volvo">5555</option><option value="saab">4444</option><option value="mercedes">3333</option><option value="audi">2222</option>
</select></td>
    <td><input id="tableDropdown-useNgRepeatIndexHere14"></td>
  </tr>

</table>
</form>