Question

我在表单验证期间为表单字段显示边框。我附加了错误类名称div类名来实现它：

document.getElementById("name").className = document.getElementById("name").className + " error"; 
document.getElementById("email").className = document.getElementById("email").className + " error";  


&.error {
    border:3px solid #cc4337;
    transition:#cc4337 .2s linear 0;
    -webkit-transition:#cc4337 .2s linear 0;
    -moz-transition:#cc4337 .2s linear 0;
}

现在，当我点击表单字段重新输入时，我希望边框消失。有没有办法可以通过跟踪哪个字段集中来从类名中删除错误（或样式为border：none）？

由于

Answer 1

尝试

&.error:focus{
  border: none;
  border-color: transparent;
}

或者你也可以试试

document.getElementById（id）.style.property = new style

例如

<script>
    document.getElementById("error").style.border-color = "transparent";
</script>

并且可能使用类似

的方式实现

 <input type="text" id="fname" onfocus="myFunction(this.id)">

Answer 2

如果您希望字段暂时删除其边框，请使用css选择器&.error:focus。如果你想让它永久消失，你需要使用JavaScript检测焦点并删除这样的类：

var foo = document.getElementById("email");
foo.className = foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' );

顺便说一句，您应该以这种方式将元素声明为变量，因为您当前的实现使代码查找元素两次而不是一次。：）

Answer 3

这就是你要追求的吗？

$('input.error').on("click", function() {
    $(this).removeClass("error");
});

或者您可以使用toggleClass，但所有这些都取决于您在焦点之后的进展方式。

表单字段处于焦点时删除边框

3 个答案: