Angular7 和 NgbModal：如何删除默认的自动对焦答案

【问题标题】：Angular7 and NgbModal: how to remove default auto focusAngular7 和 NgbModal：如何删除默认的自动对焦
【发布时间】：2019-05-05 22:34:35
【问题描述】：

我们刚刚将我们的应用程序升级到 Angular 7，我们注意到所有 ngBootstrap 模态现在在关闭按钮上都有一个默认的自动对焦，如下图所示。

这是我的代码：

html模态代码：

<form [formGroup]="storeForm" novalidate>
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Modal Test</h4>
            <button type="button" class="close" aria-label="Close" 
               (click)="activeModal.dismiss('Cross click')">
               <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <h4>Todo</h4>
        </div>
        <div class="modal-footer">
            <button role="button" type="submit" class="btn btn-primary" 
               (click)="activeModal.close('Finish click')" prevent-double- 
               submit>{{ 'store.add.finish' | translate }}</button>
       </div>
    </div>
</form>

以及如何通过我的 component.ts 调用模态

    const modal = this._modalService.open(ModalComponent, { backdrop: 
       'static', size: 'lg'});
    modal.result.then(
        (data) => {
           // some code
        },
        () => {
        }
    );

我的问题是如何删除这个不符合我们预期行为的默认自动对焦？

感谢您的阅读，请原谅拼写错误。

【问题讨论】：

标签： angular typescript ng-bootstrap ng-modal

【解决方案1】：

出于可访问性和键盘导航的原因，焦点必须在模态范围内。默认情况下，焦点位于模式中的第一个可聚焦元素上，在您的情况下是关闭按钮。您可以将ngbAutofocus 属性添加到您希望焦点所在的元素。

Focus management demo.

<button type="button" ngbAutofocus class="btn btn-danger"
      (click)="modal.close('Ok click')">Ok</button>

您可以在github阅读更多内容

【讨论】：

这就是我所做的，只是检查我是否可以恢复以前的行为。但似乎这是不可能的。感谢您的宝贵时间。

【解决方案2】：

这是一个丑陋的 hack，但你可以添加一个不可见的元素作为第一个元素：

<input type="text" style="display:none" />

【讨论】：

【解决方案3】：

如果您不介意关闭按钮实际聚焦但想摆脱丑陋的轮廓，您可以使用outline: none。

template.html:

<button type="button" aria-label="Close">Close</button>

styles.css:

button[aria-label="Close"]:focus {
  outline: none;
}

【讨论】：

请考虑添加一些散文，为您的代码提供一些上下文。我认为您会发现它对遇到此问题的其他人更有帮助。
按钮[aria-label="Close"]:focus { outline: none;}
曾经讨论过这个问题：github.com/ng-bootstrap/ng-bootstrap/issues/2814 不过好像没有结果。因此，雇用大纲似乎是迄今为止最好的解决方案。

【解决方案4】：

将style="outline:none;" 添加到您的关闭按钮

例子：

<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"> 
<span aria-hidden="true">&times;</span>
</button>

【讨论】：

【解决方案5】：

就我而言，我想完全移除按钮或输入上的自动对焦。我在主容器中设置了“ngbAutofocus”（下面的示例），它对我有用。如果有人有更好的解决方案，请分享。谢谢你:-)

 <div class="modal-header" ngbAutofocus>
    <h4 class="modal-title" id="modal-title">Profile deletion</h4>
    <button type="button" class="close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p><strong>Are you sure you want to delete <span class="text-primary">"John Doe"</span> profile?</strong></p>
    <p>All information associated to this user profile will be permanently deleted.
    <span class="text-danger">This operation can not be undone.</span>
    </p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-secondary" (click)="modal.dismiss('cancel click')">Cancel</button>
    <button type="button" class="btn btn-danger" (click)="modal.close('Ok click')">Ok</button>
  </div>

【讨论】：

【解决方案6】：

我注意到Bootstrap 本身并没有突出显示第一个控件

ngx-bootstrap 也不高亮第一个控件

【讨论】：