JavaScript 中可通过 focus/blur 事件动态添加/移除输入框高亮边框，推荐用 class 切换方式（如 .focused）实现样式与逻辑分离，并用事件委托处理动态新增元素，同时清除 outline 以避免重叠。
在 JavaScript 中，可以通过监听 focus 事件为获得焦点的输入框动态添加高亮边框（比如加一个蓝色外边框），同时配合 blur 事件移除，实现视觉反馈。核心是用 addEventListener 绑定事件，并操作元素的 style 或 CSS 类。
直接修改 style 边框
适合简单快速实现，无需额外 CSS：
- 给目标输入框（如
input[type="text"]）绑定focus事件，在回调中设置element.style.borderColor = "blue"和element.style.borderWidth = "2px" - 同时绑定
blur事件，恢复原始边框（例如"1px solid #ccc"），避免样式残留 - 注意：直接改
style会覆盖内联样式，若原边框由 CSS 类控制，建议优先用切换 class 的方式
推荐：通过切换 CSS 类控制样式
更灵活、可维护性高，样式与逻辑分离：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 先在 CSS 中定义高亮类，例如：
.focused { border: 2px solid #007bff; outline: none; } - JavaScript 中为所有输入框批量绑定事件：
document.querySelectorAll('input, textarea, select').forEach(el => {<br> el.addEventListener('focus', () => el.classList.add('focused'));<br> el.addEventListener('blur', () => el.classList.remove('focused'));<br>}); - 这样支持多种表单控件，且不干扰原有边框样式（只要原样式没用
!important覆盖）
处理动态新增的输入框
如果页面后续通过 JS 插入新输入框，需确保它们也能响应 focus：
立即学习“Java免费学习笔记（深入）”；
- 使用事件委托：把事件监听器放在父容器（如
form或body）上，判断event.target是否为可聚焦元素 - 示例：
document.body.addEventListener('focus', (e) => {<br> if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) {<br> e.target.classList.add('focused');<br> }<br>}, true); // useCapture 确保捕获阶段触发 - 注意 blur 事件不支持事件委托，仍需单独为动态元素绑定，或统一用 focus/blur 配对初始化
补充细节：避免 outline 干扰
浏览器默认会给聚焦元素加 outline（虚线框），可能和自定义边框重叠：
- 在 CSS 中统一清除并用边框替代：
input:focus, textarea:focus, select:focus { outline: none; } - 为无障碍考虑，不要完全移除视觉焦点指示——自定义边框就是一种更美观的替代方案
- 如需保留键盘导航友好性，可增加
box-shadow做双层高亮，提升对比度
