我们刚刚将应用程序升级到了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">×</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
},
() => {
}
);
我的问题是如何删除这种不符合我们预期行为的默认自动对焦?
感谢您的阅读,请原谅拼写错误。
答案 0 :(得分:4)
出于可访问性和键盘导航的原因,需要将焦点放在模式内。默认情况下,焦点位于模式中的第一个可聚焦元素上,在您的情况下为关闭按钮。您可以将ngbAutofocus
属性添加到希望焦点所在的元素上。
<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">×</span>
</button>