推荐使用 focusin 和 focusout 事件实现输入框焦点高亮：在 focusin 时为目标添加 focused 类以应用高亮边框，focusout 时移除该类；需配合 CSS 设置 border 过渡效果，并注意可访问性与移动端兼容性。
在 JavaScript 中，可以通过监听 focusin 事件，在输入框获取焦点时动态添加高亮边框样式；配合 focusout 恢复原样式，实现清晰的视觉反馈。
使用 focusin 和 focusout 实现边框高亮
focusin 是冒泡的焦点进入事件，比 focus 更适合用于父容器委托（比如表单整体监听）；focusout 是其对应失焦事件。推荐用这两个事件来统一管理焦点样式。
- 给目标输入框或其父容器（如
<form>）绑定focusin事件，检测触发元素是否为<input>、<textarea>或<select> - 为匹配的元素添加一个临时 class（如
focused），CSS 中定义该 class 的outline或border样式 - 同时绑定
focusout，移除该 class，确保失焦后样式还原
CSS 部分：定义高亮边框效果
避免直接修改 outline（可能影响可访问性），更推荐用 border + box-sizing: border-box 保证布局稳定：
.form-control {
border: 2px solid #ddd;
box-sizing: border-box;
transition: border-color 0.2s ease;
}
.form-control.focused {
border-color: #007bff;
outline: none; /* 可选：去除默认焦点轮廓 */
}JavaScript 绑定逻辑（原生写法）
以下代码作用于整个表单，支持所有可聚焦表单控件：
立即学习“Java免费学习笔记（深入）”；
const form = document.querySelector('form');
form.addEventListener('focusin', (e) => {
const target = e.target;
if (target.matches('input, textarea, select')) {
target.classList.add('focused');
}
});
form.addEventListener('focusout', (e) => {
const target = e.target;
if (target.matches('input, textarea, select')) {
target.classList.remove('focused');
}
});注意点与优化建议
- 确保输入框有
tabindex或原生可聚焦属性（如name），否则无法触发焦点事件 - 若使用框架（如 React/Vue），优先通过状态控制 class，而非直接操作 DOM
- 移动端需注意
focusin在部分 iOS 版本中行为受限，可补充click或touchstart做兼容 - 高亮色建议符合 WCAG 对比度要求（至少 4.5:1），提升可访问性
