JavaScript输入框失焦时样式修改失效问题排查及解决方案

你的代码问题所在 #

• 内联样式无法识别!important：element.style.border设置的是元素的内联样式，!important在这里不生效，浏览器会直接忽略这个声明。
• 冗余的DOM查询：event.target本身就是当前失去焦点的输入元素，不需要再通过event.target.id重新调用getElementById获取元素。

修改后的基础修复代码 #

JavaScript #

let inputTags = document.getElementsByTagName("input");
let validate = (event) => {
  // 直接使用event.target操作当前元素
  event.target.style.border = "1px solid #ff0000";
};
for (let i = 0; i < inputTags.length; i++) {
  inputTags[i].addEventListener("blur", validate);
}

HTML（保持不变） #

<input type="text" id="a">
<input type="text" id="b">
<input type="text" id="c">

更优的替代方案（推荐使用CSS类控制样式） #

直接操作内联样式不利于维护，用JS切换CSS类的方式可以实现样式与逻辑分离，扩展性更强：

CSS #

.input-error {
  border: 1px solid #ff0000;
  /* 可添加更多错误样式，比如提示性背景色 */
  background-color: #ffebee;
}

JavaScript（加入验证逻辑示例） #

let inputTags = document.getElementsByTagName("input");
let validate = (event) => {
  // 这里可以自定义验证规则，示例：输入为空则判定无效
  const isInputInvalid = event.target.value.trim() === "";
  
  if (isInputInvalid) {
    event.target.classList.add("input-error");
  } else {
    event.target.classList.remove("input-error");
  }
};
for (let i = 0; i < inputTags.length; i++) {
  inputTags[i].addEventListener("blur", validate);
}

内容的提问来源于stack exchange，提问作者Sushant