没有JavaScript

Question

一旦我点击主页面上的按钮，就会打开一个模态，其中包含供用户选择的项目列表。当我打开模态时，我的模态中的内容没有获得焦点，而是当我按下标签时 - 我看到它在实际进入模态之前通过主页（背景）上的其余项目进行标记。

如何让我的模态内容在打开后获得焦点，而不是在到达模态之前必须通过主页进行制表？

这是我的模态代码：

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

Answer 1

您可以使用自动对焦属性

Answer 2

自动对焦属性是布尔属性。如果存在，它指定元素在页面加载时应自动获得焦点。

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

Answer 3

没有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;
            });
    }

在没有javascript

3 个答案:

没有JavaScript

使用JavaScript