单击html组件时隐藏焦点样式的问题

Question

我正在创建一个输入组件。为了更好的用户体验，我在单击组件时隐藏了焦点样式（这是我在click事件的处理程序中完成的）。但是在一种情况下这种方法效果不佳：

1. 单击组件
2. 离开浏览器标签（我正在使用Chrome）
3. 返回浏览器标签

一旦你回到页面焦点事件就会触发最后聚焦的元素，但由于点击事件没有被触发，焦点样式会回来。你不想要的东西。

有人可以提出一个很好的解决办法。

Answer 1

使用CSS删除/编辑样式。

input:focus {
    box-shadow: none;
    outline: none;
}