数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理
化学
生物
数学
英语
经济
心理学
社会学
时尚
法律如何去除点击按钮后按钮周围的焦点？
在构建 Web 应用程序时，您可能会注意到点击按钮时往往会在按钮周围留出轮廓或“聚焦环”。这有助于辅助功能，但有时对于特定设计来说是不需要的。在本文中，我们将探讨几种在点击时去除按钮聚焦环的方法，同时不牺牲键盘用户的辅助功能。
点击时去除按钮周围焦点的途径
使用 JavaScript 的 addEventListener 方法
为了确保仅在鼠标点击时隐藏焦点环，但在键盘导航时仍然可见，我们可以使用 JavaScript 的 addeventlistener() 方法来检测点击并有选择地去除轮廓。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove Focus on Button Click</title>
<style>
button {
padding: 10px 20px;
border: 2px solid #007bff;
border-radius: 5px;
background-color: #007bff;
color: white;
}
button:focus {
outline: 2px solid #333;
}
</style>
</head>
<body>
<button onclick="removeFocusOnClick(this)">
Click Me
</button>
<script>
function removeFocusOnClick(button) {
button.style.outline = 'none';
button.addEventListener('blur', function() {
button.style.outline = '';
});
}
</script>
</body>
</html>
输出
使用 CSS 伪类
在该途径中，我们使用 CSS 仅在使用键盘时应用焦距样式，确保焦点环在鼠标点击时隐藏，但在键盘用户使用时依然可以访问。这可以通过 :focus-visible 伪类实现。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove Focus on Button Click</title>
<style>
button {
padding: 10px 20px;
border: 2px solid #007bff;
border-radius: 5px;
background-color: #007bff;
color: white;
}
button:focus-visible {
outline: 2px solid #333;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
输出
更新于：2024 年 11 月 14 日
8 次浏览
广告