如何在 Typescript 中删除超链接上的焦点边框

Posted 2023-03-25

【中文标题】如何在 Typescript 中删除超链接上的焦点边框

【英文标题】：How to remove the focus border on hyperlink in Typescript

【发布时间】：2022-01-18 07:28:47

【问题描述】：

我用打字稿写代码

*"<a onclick=\"window.open(this.href,'_blank');return false;\" href=\"https://support.office.com/client/61994a3b-2c87-41c4-a88d-a6455efa362d?omkt=en-US\" >license terms</a>",

"<a onclick=\"window.open(this.href,'_blank');return false;\" href=\"https://privacy.microsoft.com/en-us/privacystatement\">privacy policy</a>");*

当运行 ts 代码时，它显示如下，第一个超链接上有一个意外的焦点框。我怎样才能删除它？谢谢！

【参考方案1】：

您需要做的是使用active 和focus 伪选择器更改样式。 不幸的是，您不能使用内联样式更改伪选择器样式。 所以你应该通过 CSS 或 JS 来做。

CSS 版本： TS 文件：

<a 
    onclick=\"window.open(this.href,'_blank');return false;\" 
    href=\"https://support.office.com/client/61994a3b-2c87-41c4-a88d-a6455efa362d?omkt=en-US\" 
    class="my-class">
    license terms
</a>

CSS 文件：

my-class:active, my-class:focus 
    outline: none;
    border: none;
    -moz-outline-style: none;

JS 版本：

<a 
    onclick=doSomething(e)
    href=\"https://support.office.com/client/61994a3b-2c87-41c4-a88d-a6455efa362d?omkt=en-US\" 
    class="my-class">
    license terms
</a>

const doSomething = (e) => 
    e.target.style.outline = "none";
    e.target.style.border = "none";
    window.open(this.href,'_blank');
    return false;

【讨论】：

谢谢，我发现这是因为在代码库中它们需要在 htmlinstance 时获得焦点，我尝试跳过代码并修复了我的问题。 if (item instanceof HTMLElement) window.focus(); item.focus();