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 模态弹出自动对焦不起作用

如何将 Material UI 文本字段集中在按钮单击上?

如何在Angular Material Datepicker中从今天的日期中移除焦点?

如何在自动对焦中隐藏离子键盘

PrimeNG 对话框防止自动对焦第一个按钮

移除 Material Stepper 标头