Javascript 在表行元素上设置焦点

我有一个表格列表中的项目，我希望能够使用键盘上下按钮滚动。目前，我可以通过tabindex属性在列表中向下移动，获得类似的预期效果。我还使用ng repeat生成元素的实例。关于如何通过使用向上键和向下键来聚焦和上下滚动列表的提示或线索

下面是示例代码

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>

table ng if=“！toolbarCtrl.loadingContacts”class=“table dataTable hover”id=“table3”>

我把你的checkKey函数改成了这个

 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();
        }
    }

controller.checkKey=函数（事件）{
$（“tr[tabindex=0]”）focus（）；
var事件=window.event；
如果（event.keyCode==40）{//down
var idx=$（“tr:focus”）.attr（“tabindex”）；
idx++；
如果（idx>6）{
idx=0；
}
$（“tr[tabindex=“+idx+”]”）focus（）；
}
如果（event.keyCode==38）{//up
var idx=$（“tr:focus”）.attr（“tabindex”）；
idx-；
if（idx<0）{
idx=6；
}
$（“tr[tabindex=“+idx+”]”）focus（）；
}
}

---

我很接近，但它直接跳到了最后一个元素。这看起来正确吗？

这里有一个小技巧，用于处理向上/向下箭头的按键事件，以导航表行（

）。您可能需要根据生成的数据调整上下tabindex处理，但这取决于您自己。德国劳埃德船级社

（jsfiddle:）

示例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();      
    }
}

$（文档）.ready（函数（）{
$（“tr[tabindex=0]”）focus（）；
document.onkeydown=checkKey；
});
功能检查键（e）{
var事件=window.event？window.event:e；
如果（event.keyCode==40）{//down
var idx=$（“tr:focus”）.attr（“tabindex”）；
idx++；
如果（idx>6）{
idx=0；
}
$（“tr[tabindex=“+idx+”]”）focus（）；
}
如果（event.keyCode==38）{//up
var idx=$（“tr:focus”）.attr（“tabindex”）；
idx-；
if（idx<0）{
idx=6；
}
$（“tr[tabindex=“+idx+”]”）focus（）；
}
}

这就是我使用的方法。它在使用名称和角度索引创建的自定义id上操作jquery焦点。默认设置仅仅是因为上下键也在上下移动我的页面，这就消除了这个问题

controller.checkKey = function (event, index) {
        event.preventDefault();
        if (event.keyCode === 40) {
            $('#item-' + (++index)).focus();
        }
        if (event.keyCode === 38) {
            $('#item-' + (--index)).focus();
        }
    };

---

这种方法适用于angular范例，上面的jquery示例也很好。

我已经接近正确了，但是不同的是使用angular生成的，因此它们都有一个tabindex=0。我理解这应该使它们在视觉上符合逻辑顺序。当前，向下键和向上键聚焦列表底部的实例。我明白了。为了避免这种情况，您可以使用jQuery

$（“tr[tabindex=0]”）。如果这是您的一个选项，那么每个
都可以修复
的tabindex值。我唯一的困惑是
$（“tr[tabindex=0]”）。每个（函数（idx）{$（this.attr（“tabindex”，idx）；}）
这是否将数组中的每个项的tabindex值设置为=idx？这是正确的。在我看来，您应该在构建表的angular代码中处理tabindex值，而不是为每一行指定零，但是如果这不灵活，我今天提供的代码将使用jquery循环（
each
）重新索引tabindex值。该代码获取所有
元素，循环并将tabindex属性值重新分配给循环中的索引值。这将生成正确递增的tabindex值，以便剩余的向上/向下导航正常工作。我了解的是，您的方法将tabindex重新编号为I++递增，因此我不需要在开始时将tab index属性设置为0。我可以理解为什么您会获得所有tabindex=“0”太多了……您没有为tabindex值使用变量，而是每次都将其赋值为0。