【问题标题】：Getting keyboard focus on modal once open without JavaScript在没有 JavaScript 的情况下打开后将键盘焦点放在模态上
【发布时间】：2018-04-02 22:54:30
【问题描述】：

单击主页上的按钮后，会打开一个模式，其中包含供用户选择的项目列表。当我打开模态时，我的模态中的内容没有获得焦点，而是当我按下 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;
            });
    }

【问题讨论】：

标签： html twitter-bootstrap wai-aria

【解决方案1】：

你可以使用自动对焦属性

【讨论】：

我尝试将自动对焦添加到我最外层的 div，但是当模态打开时我仍然没有获得焦点 - 在到达模态内容之前，我仍然需要在页面的其余部分中切换。

【解决方案2】：

没有 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 的原因是autofocus only works on input, textarea, select and button。这并不理想，但它确实有效。

使用 JavaScript

让你的模态打开函数像这样：

 public open() {
        this.modal.open();
        document.querySelector('.modal').focus();
        this.myService.getUsers()
            .subscribe((data: ClassRoster[]) => {
                this.classData = data;
            });
    }

【讨论】：

我根据您的建议让它工作，但我注意到当我打开对话框时，焦点转到关闭按钮，如果我要关闭对话框并再次打开它，我不明白按钮不再是焦点...这是为什么呢？
@bluePearl 是因为按钮已经自动对焦了，没有JavaScript不能自动对焦。
如果我在哪里添加 javascript 会有多大的影响/代码？我在帖子中包含了我的模态打开方法。
添加此行我收到一条错误消息，指出：属性.getQuerySelector 不存在于类型Document 上。你的意思是querySelectorAll() 当我尝试使用querySelectorAll 时，我得到focus() 下划线作为错误说明：Property focus does not exist on type NodeListOf<Element>
@bluePearl 抱歉，我犯了一个错误 - 我已经更新了答案，现在应该可以了。

【解决方案3】：

autofocus 属性是一个布尔属性。当存在时，它指定一个元素在页面加载时应该自动获得焦点。

<!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>

【讨论】：

我面临的问题是每次使用后我都会刷新页面，以便在初始加载后再次使用它