jquery - 我怎样才能保留原来的 :focus element with CSS?

Question

所以，我有一个 <input>具有 :focus 的元素来自 CSS 的属性。

CSS

#my_input {
border: 1px solid black;
}

#my_input:focus {
border: 1px solid green;
}

此输入用于登录表单。如果用户输入的表单有误，比如输入的字符少于最小字符数，则输入表单的边框为红色。错误修复后，我希望边框恢复正常。边框恢复正常，但现在 CSS 中的 :focus 元素不起作用。

一旦用户修复了错误

JS

$("#my_input").css("border", "1px solid black");

你如何解决这个问题？

Answer 1

通过使用 $("#my_input").css("border", "1px solid black"); ，当您将该样式直接添加到元素时，您正在覆盖 CSS。相反，使用 $("#my_input").css("border", "");然后将强制#my_input使用您原来的 CSS 样式。

作为快速提示，最好执行以下操作:

CSS

#my_input {
  border: 1px solid black;
}

#my_input:focus {
  border-color: green;
}

#my_input.error {
  border-color: red;
}

然后在您的 JS 中，突出显示错误:

$("#my_input").addClass('error');

然后删除错误突出显示:

$("#my_input").removeClass('error');