AngularJS指令中的Tabindex

Question

我写了一个指令，它生成一个包含一些行的表。每行都有一些用于选择的下拉列表以及一些填充信息的普通文本区域。 问题是，当我按下键盘上的Tab键时，下拉选项会被忽略而不会被聚焦。光标跳转到下一个文本区域。我尝试使用每列行中的增量 tabindex 属性修复问题，但仍然没有区别。 通过使用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>

Follwing产生一个文本区域，通过按键盘上的标签进行聚焦。

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

请注意在指令内生成的所有内容都不是静态HTML。 图为该表。通过按Tab键，光标跳转到同一行或下一行中的下一个可能的文本区域。

Answer 1

不完全确定您在此处描述的行为。但是，默认情况下，在继续下一行之前，您的HTML将从左到右为字段正确格式化。

选项卡将允许用户专注于“下一个”表单字段，但是，一旦下拉列表具有焦点，箭头向上/向下键将用于选择选项。选择一个选项后，再次按Tab键将移至下一个表单域。

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

即使是角度，DOM也是DOM。如果表格中的表单字段的语法正确，则它将使用选项卡正确处理。

非角度的例子，因为如果你没有强制使用tabindex，使用angular应该对tab键没有影响：https://codepen.io/KarsunJason/pen/KqeOYg

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

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