Angular Material 按钮移除自动对焦

Posted 2023-04-14

【中文标题】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;