javascript - 当表单域处于焦点时删除边框

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=新样式

例如。

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

并可能使用类似的东西来实现

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