Angular2 -将焦点放在隐藏的div按钮上
Angular2 -将焦点放在隐藏的div按钮上
提问于 2017-10-10 08:45:54
我致力于一个角度项目，在那里，我试图实现a11y的每个按钮和链接，这是可表的。
当我按Enter的菜单按钮，一个div与菜单链接以及关闭按钮。这个div存在于DOM中，但是它的可见性是隐藏的。
调用一个材料动画来使这个div出现。，我想使用自动焦点和表索引将焦点放在这个div内的关闭按钮上，但是这个按钮没有聚焦。
应用程序
<div class="panel">
<button (click)="toggleMenu()">Open</button>
</div>菜单
<div class="menu">
<button
class="close animation-close-in"
(click)="toggleMenu()"
[attr.autofocus]="isMenuOpen() ? 'autofocus': null"
[attr.tabindex]="isMenuOpen() ? '0': null"
>
Close
</button>
<!-- Links list -->
</div>服务
open = false;
public toggleMenu(): void {
this.open = !this.open;
if (this.open) {
this.scrollService.disableScroll();
} else {
this.scrollService.enableScroll();
}
}
public isMenuOpen(): boolean {
return this.isOpen();
}
public isOpen(): boolean {
return this.open;
}回答 1
Stack Overflow用户
发布于 2017-10-10 12:00:16
当页面加载时使用autofocus属性：
autofocus内容属性允许作者在页面加载后立即显示控件的焦点，这样用户就可以开始输入，而不必手动调整主控件的焦点。
您必须使用focus()函数在toggleMenu()函数中手动调整按钮的焦点。例如：
document.getElementById("mybutton").focus();其中我的按钮是按钮元素的id。
注意，您不必在元素上设置tabindex属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46662314
复制相关文章
相似问题
腾讯云开发者
