JavaScript 中表单事件怎么在 focusin 中实现输入框获取焦点时的外边框高亮-js教程-PHP中文网

推荐使用 focusin 和 focusout 事件实现输入框焦点高亮：在 focusin 时为目标添加 focused 类以应用高亮边框，focusout 时移除该类；需配合 css 设置 border 过渡效果，并注意可访问性与移动端兼容性。

javascript 中表单事件怎么在 focusin 中实现输入框获取焦点时的外边框高亮

在 JavaScript 中，可以通过监听 focusin 事件，在输入框获取焦点时动态添加高亮边框样式；配合 focusout 恢复原样式，实现清晰的视觉反馈。

使用 focusin 和 focusout 实现边框高亮

focusin 是冒泡的焦点进入事件，比 focus 更适合用于父容器委托（比如表单整体监听）；focusout 是其对应失焦事件。推荐用这两个事件来统一管理焦点样式。

java后端编程

专用于 Java Spring Boot 后端开发的专业技能。当用户提出以下需求时，应调用此技能：构建 REST API、创建 Spring Boot 项目、编写 Java 后端服务、配置数据库访问（JPA / MyBatis）、处理认证与授权（Spring Security / JWT）、实现微服务架构（Spring Cloud）、排查 Spring Boot 相关错误、审查 Java 代码质量，或执行任何与 Spring Boot / Java 后端相关的任务。

下载

给目标输入框或其父容器（如 <form></form>）绑定 focusin 事件，检测触发元素是否为 <input>、<textarea></textarea> 或 <select></select>
为匹配的元素添加一个临时 class（如 focused），CSS 中定义该 class 的 outline 或 border 样式
同时绑定 focusout，移除该 class，确保失焦后样式还原

CSS 部分：定义高亮边框效果

避免直接修改 outline（可能影响可访问性），更推荐用 border + box-sizing: border-box 保证布局稳定：

示例 CSS：

.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 绑定逻辑（原生写法）

以下代码作用于整个表单，支持所有可聚焦表单控件：

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');
  }
});