AngularJS指令中的Tabindex

我寫了一個指令，該指令產生一個包含一些行的表。每行有一些用於選擇的下拉列表，以及一些用於填充信息的普通文本區域。問題是，當我點擊鍵盤上的Tab鍵時，下拉選擇被忽略並且不被關注。光標跳轉到下一個文本區域。我試圖用增量tabindex屬性在每列的行內修復問題，但仍然沒有區別。每行的每列都是在指令內部通過使用ng-repeat循環遍歷數組而生成的。以下產生一個下拉列表：AngularJS指令中的Tabindex

<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鍵，光標跳轉到下一個可能的文本區域，在同一行或下一行。

來源

2017-04-07 Danial

不完全確定你在這裏描述的是什麼行爲。但是，默認情況下，在繼續下一行之前，您的HTML將通過正確格式化的字段從左到右選中。

選項卡將允許用戶專注於「下一個」表單域，但是，一旦下拉菜單具有焦點，箭頭向上/向下鍵用於選擇一個選項。一旦選擇了一個選項，再次按Tab鍵移動到下一個表單域。

如果有東西被跳過，我會檢查你的HTML語法。

即使通過角度，DOM也是DOM。如果您的表單字段的語法在表中是正確的，則它將使用製表符正確處理。

，因爲採用了棱角分明應該有Tab鍵，如果你沒力的tabindex零影響非anglar例如：） 1檢查您的表單字段的正確語法：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>

建議。 2）在每個字段中使用tabindex =「0」（強制在頁面的自然順序內停止製表符）或完全刪除tabindex。

來源

2017-07-05 18:26:59 PrimaryW

AngularJS指令中的Tabindex

回答

相關問題