Angular7和NgbModal:如何删除默认的自动对焦

时间:2018-12-04 13:22:28

标签: angular typescript ng-bootstrap ng-modal

我们刚刚将应用程序升级到了angular 7,我们注意到所有ngBootstrap模态现在都默认自动关闭按钮,如下图所示。

modal image

这是我的代码:

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
        },
        () => {
        }
    );

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

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

4 个答案:

答案 0 :(得分:4)

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

Focus management demo

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

您可以在github

上阅读更多内容

答案 1 :(得分:3)

这是一个丑陋的hack,但是您可以添加一个不可见的元素作为第一个元素:

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

答案 2 :(得分:1)

template.html

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

styles.css

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

答案 3 :(得分:1)

不添加style="outline:;“添加到您的关闭按钮

示例:

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