Angular Material 按钮移除自动对焦
Posted
技术标签:
【中文标题】Angular Material 按钮移除自动对焦【英文标题】:Angular Material button remove autofocus 【发布时间】:2018-12-12 10:42:45 【问题描述】:我有以下按钮
<td mat-cell *matCellDef="let element">
<button mat-icon-button type="button" (click)="downloadStuff(element)">
<mat-icon mat-icon matTooltip="element.someId">picture_as_pdf</mat-icon>
</button>
</td>
一切都好,但我注意到默认情况下会勾勒出这个小家伙:
好的.... CSS 让我可以通过以下方式去除烦人的轮廓:
button:focus
outline: none;
但是……我仍然得到这个烦人的默认背景焦点:
我在 CSS 中尝试了一些覆盖和背景相关的东西,但似乎都没有解决这个问题。 如何删除此默认背景? 为什么默认情况下会这样???
在开发工具中查看所选项目。
【问题讨论】:
这是 Material 设计的正常行为,您可以从 this guide 中看到。您是否尝试将background-color: none;
添加到您的 &:focus CSS 中?
谢谢杰克,但背景颜色:无;是我尝试的第一件事。
如果您使用 Chrome 的 DevTool 并检查元素并将其设置为焦点,应用什么 CSS?
视觉焦点指示是可用性的重要组成部分。您的问题的解决方案是移除焦点,而不是抑制焦点指示器,因为这会导致糟糕的用户体验。默认情况下,由于您正在做某事或正在使用某事而发生这种情况 - 我们需要查看您如何使用按钮才能知道原因。通常,默认情况下页面上的简单按钮不会获得焦点(例如xonklxyamje.angular.stackblitz.io 代码:stackblitz.com/angular/…)。
我添加了从 Chrome 中的开发工具中获取的所选按钮的副本。该按钮是根据表中的行数动态生成的。它只是添加到表格的一个单元格中。
【参考方案1】:
就我而言,真正的问题是按钮结构。 Angular Material 构建了各种子组件,最后一个是带有 css 类 mat-button-focus-overlay
的“div”:
我的解决方案很简单。在style.css
添加或覆盖mat-button-focus-overlay
:
.mat-button-focus-overlay
background-color: transparent!important;
【讨论】:
【参考方案2】:单击或触摸 Material Design 按钮后,它保持焦点 ---> 要解决此问题,您需要添加以下代码:onclick="this.blur()"
<button mat-raised-button onclick="this.blur()" (click)="onEdit()">Edit</button>
或者在你的情况下
<td mat-cell *matCellDef="let element">
<button mat-icon-button type="button" onclick="this.blur()" (click)="downloadStuff(element)">
<mat-icon mat-icon matTooltip="element.someId">picture_as_pdf</mat-icon>
</button>
</td>
【讨论】:
onclick和(click)有什么区别? 这里是用例子来解释的。 w3schools.com/jsref/event_onclick.asp 它可以工作,但焦点会显示几毫秒,然后模糊,产生丑陋的效果。我更喜欢 Rafique Mohammed 给出的解决方案 这应该是公认的答案。【参考方案3】:我可以通过在其他项目上设置属性 cdk-focus-start 来摆脱默认的焦点按钮。 更多信息here
【讨论】:
谢谢。针对我的问题向我发送了正确的方向。仅供参考,cdk-focus-start
已弃用,请改用 cdkFocusRegionstart
。【参考方案4】:
在您的样式 css 中,只需添加此代码。它会从所有按钮中删除那些烦人的轮廓
button:focus
outline: none !important;
【讨论】:
我想有更好的解决方案,因为material.angular.io/components/button/overview 中的示例没有使用它,但它有效!【参考方案5】:也试试这个。
<button mat-icon-button [autofocus]="false" (click)="closeDialog()">
<mat-icon>clear</mat-icon>
</button>`
只需添加[autofocus]
。
【讨论】:
或者你可以放上。【参考方案6】:使用它来删除 .css 中的轮廓和自动对焦:
button
outline: none;
::ng-deep .mat-button-focus-overlay
display: none;
【讨论】:
【参考方案7】:问题有点老了。但我为此找到了更好的解决方案。
在按钮标签中添加tabindex="-1",问题就解决了!
<button tabindex="-1" mat-icon-button type="button" (click)="downloadStuff(element)">
<mat-icon mat-icon matTooltip="element.someId">picture_as_pdf</mat-icon>
</button>
【讨论】:
这不是一个更好的解决方案。您正在删除选项卡的键盘导航。 谢谢,在所有这些“为什么不修复全局样式以消除初始焦点,好主意”中的真正解决方案【参考方案8】:对于:focus, :cdk-keyboard-focus 等,可以去掉box-shadow
box-shadow: none;
【讨论】:
以上是关于Angular Material 按钮移除自动对焦的主要内容,如果未能解决你的问题,请参考以下文章
Angular Bootstrap 模态弹出自动对焦不起作用