一旦我单击主页上的按钮，就会打开一个模式，其中包含供用户选择的项目列表。当我按下 tab 键时，我的模态中的内容没有得到焦点 - 我看到它在实际进入模态之前浏览主页（背景）上的其余项目。
如何让我的模态内容在打开后获得焦点，而不必在到达模态之前通过主页进行选项卡？
这是我的模态代码：
<div role="dialog" aria-modal="true" class="modal">
<div class="modal-dialog override">
<div class="modal-content">
<div class="section">
<header class="section-header">
<button tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
</header>
<div class="section-body">
<ng-content select=".modal-body"></ng-content>
</div>
</div>
</div>
</div>
</div>
这是我打开模态的方法：
public open() {
this.modal.open();
this.myService.getUsers()
.subscribe((data: ClassRoster[]) => {
this.classData = data;
});
}
您可以使用
自动对焦属性
自动对焦属性是一个布尔属性。如果存在，它指定元素应在页面加载时自动获得焦点。
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>Without JavaScript
为您的按钮指定 autofocus 属性：
<div role="dialog" aria-modal="true" class="modal">
<div class="modal-dialog override">
<div class="modal-content">
<div class="section">
<header class="section-header">
<button autofocus tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
</header>
<div class="section-body">
<ng-content select=".modal-body"></ng-content>
</div>
</div>
</div>
</div>
</div>
您必须对按钮执行此操作而不能将其直接应用于div的原因，因为自动对焦仅适用于input，textarea，select和button。这并不理想，但它有效。
使用 JavaScript
使模态打开函数如下所示：
public open() {
this.modal.open();
document.querySelector('.modal').focus();
this.myService.getUsers()
.subscribe((data: ClassRoster[]) => {
this.classData = data;
});
}