Setting focus on table row elements
I have a list of tables that I want to scroll using the up and down keys of the keyboard. Currently I can get a similar desired effect of moving through the list with the tabindex attribute. I also use ng repeat to generate instances of elements. Tips or hints on how to focus and scroll up and down a list using the up and down arrow keys?
Sample code below.
table ng-if="!toolbarCtrl.loadingContacts" class="table dataTable hover" id="table3">
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="pointer" tabindex="0" ng-repeat="contact in toolbarCtrl.contactEntities | filter:toolbarCtrl.toolbarSearchStringAfterDelay | orderBy: toolbarCtrl.tab == toolbarCtrl.tabs.RECENT ? '-dateSeen' : (toolbarCtrl.tab == toolbarCtrl.tabs.ALL ? '+data.fileAs' : '')"
ng-class="" ng-if="toolbarCtrl.toolbarSearchStringAfterDelay" ng-click="toolbarCtrl.selectContact(contact)">
<td rel="popover_dark" ng-class="contact.loading ? 'contactDisabled' : '' " data-container="body" data-toggle="popover" data-placement="right" data-content="" data-original-title="" title="" class="sorting_1 has_popover">
</td>
</tr>
</tbody>
</table>
I mutated your checkKey function to become this
controller.checkKey = function (event) {
$("tr[tabindex=0]").focus();
var event = window.event;
if (event.keyCode == 40) { //down
var idx = $("tr:focus").attr("tabindex");
idx++;
if (idx > 6) {
idx = 0;
}
$("tr[tabindex=" + idx + "]").focus();
}
if (event.keyCode == 38) { //up
var idx = $("tr:focus").attr("tabindex");
idx--;
if (idx < 0) {
idx = 6;
}
$("tr[tabindex=" + idx + "]").focus();
}
}
I'm close, but it slips right to the last element. Does it look right?
source to share
Below is a small method to handle keydown events for up / down arrows to navigate table rows ( <tr>
). You may have to tweak the top and bottom taboo processing from your generated data, but that's up to you. GL!
(jsfiddle: https://jsfiddle.net/qkna8jgu/2/ )
Example HTML:
<table>
<tr tabindex="0">
<td>first row</td>
</tr>
<tr tabindex="1">
<td>second row</td>
</tr>
<tr tabindex="2">
<td>third row</td>
</tr>
<tr tabindex="3">
<td>fourth row</td>
</tr>
<tr tabindex="4">
<td>fifth row</td>
</tr>
<tr tabindex="5">
<td>sixth row</td>
</tr>
<tr tabindex="6">
<td>seventh row</td>
</tr>
</table>
JQuery
$(document).ready(function() {
$("tr[tabindex=0]").focus();
document.onkeydown = checkKey;
});
function checkKey(e) {
var event = window.event ? window.event : e;
if(event.keyCode == 40){ //down
var idx = $("tr:focus").attr("tabindex");
idx++;
if(idx > 6){
idx = 0;
}
$("tr[tabindex="+idx+"]").focus();
}
if(event.keyCode == 38){ //up
var idx = $("tr:focus").attr("tabindex");
idx--;
if(idx < 0){
idx = 6;
}
$("tr[tabindex="+idx+"]").focus();
}
}
source to share
This was the approach I used. It uses jquery focus on custom id created using angular name and index. The preventDefault function is just that the up and down keys have also changed my page up and down, it gets rid of that.
controller.checkKey = function (event, index) {
event.preventDefault();
if (event.keyCode === 40) {
$('#item-' + (++index)).focus();
}
if (event.keyCode === 38) {
$('#item-' + (--index)).focus();
}
};
This approach fits well into the angular paradigm and the jquery examples above are great too.
source to share