在 keydown 触发下一个选项卡索引（聚焦下一个元素）答案

【问题标题】：On keydown trigger next tab index (focus next element)在 keydown 触发下一个选项卡索引（聚焦下一个元素）
【发布时间】：2016-09-15 11:49:53
【问题描述】：

我有一个引导程序的下拉菜单（我只实现了没有 Javascript 的样式）...因此我需要将一些 js 功能移植到 angular2。

一个是键盘可访问性。

到目前为止，我有：

<div (keydown)="onMenuKeydown($event)" ....>
    <ul class="dropdown-menu">
        <li><a href="#"...>option 1</a></li>
        <li><a href="#"...>option 2</a></li>
        <li><a href="#"...>option 3</a></li>
    </ul>
</div>

在我的控制器中，我有这个：

onMenuKeydown(event: KeyboardEvent){
    if(event.keyCode === 40){
        /*event.srcElement.nextSibling.*/
        event.preventDefault();
    }
}

我想要的是，在向下箭头时它模拟或触发 TAB 键（因此它应该关注下一个元素）和向上箭头键以模拟 SHIFT-TAB 键（上一个 tabindex）

我有event.srcElement 和nextSiblingproperty 但它没有方法焦点...所以不能这样做event.srcElement.nextSibling.focus();。

这里最好的解决方案是什么？

【问题讨论】：

如何在标签之间切换？添加/删除 CSS 类？
不是选项卡...它是一个下拉菜单...您可以在此处查看：getbootstrap.com/javascript/#dropdowns ...单击一个打开，然后使用 tab 键导航
我认为最好的方法是在您的 index.html 文件中添加引导程序的 javascript。这样你就不必担心如何让它在 angular2 中工作，因为 bootstrap 已经让它工作了。
是的......当然......为什么我之前没有想到......关键是要远离jquery和繁琐的js...... angular确实会发现，只是需要找出路...希望这不是您解决所有问题的方法...只需包含更多/所有内容...
所以我认为最好的方法是使用 angular2 下拉菜单并在其上添加引导样式。您甚至可以在 npm 上使用 angular2 获得引导下拉菜单：npmjs.com/package/ng2-dropdown 如果您想复制组件上的行为，您甚至可以在 github 上查看源代码。

标签： javascript angular dom-events

【解决方案1】：

所以，供参考，Element和HTMLElement显然是有区别的，后者是扩展的。

Angular2 有一个 ElementRef，您通常在引用 HTML 元素时使用...

所以要从 event.nextSibling 中获取 HTMLElement

let next = new ElementRef(event.nextSibling);

和使用

next.nativeElement.focus();

不要忘记在你的导入中包含 ElementRef

import { Component, ElementRef } from '@angular/core';

【讨论】：

您能否解释一下这个@DS_web_developer，因为我也面临同样的问题。我尝试使用 tabindex 但它无法在 IE 中工作。它仅在 tabindex=1 时有效，但只有一次。一旦列表结束，焦点就会消失。