删除先前设置的边框颜色

时间:2019-12-27 06:54:15

标签: javascript html css

 function validate() {
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;

      if (username == "") {

        document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
        document.getElementById("username").style.borderColor = "red";
        return false;
      }
      if (password == "") {


        document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
        document.getElementById("password").style.borderColor = "red";
        return false;
      }

    }
    #username:focus {
      background-color: yellow;
      border-color: green;
    }

    #password:focus {
      background-color: yellow;
      border-color: green;
    }

    #message {
      color: red;
    }
   

    <form onsubmit=" return validate()">
      LOGIN:-
      <br>
      <input id="username" type="text" name="username" placeholder="USERNAME">
      <br>
      <input id="password" type="password" name="password" placeholder="PASSWORD">
      <br>
      <input type="submit" value="SUBMIT">
      <p id="message">

    </form>

  • 当我专注于文本字段时,背景和边框颜色分别变为黄色和绿色(通过CSS)。
  • 如果我单击“提交”而不输入任何内容,则边框颜色将变为红色(通过javascript)。
  • 但是当我再次将重点放在文本字段上时,红色边框颜色并没有消失,而是同时出现了绿色和红色边框。

我只希望它是绿色的。您还能解释这种现象的原因吗?

7 个答案:

答案 0 :(得分:6)

之所以发生这种情况,是因为您更新了元素样式而不是CSS类属性。元素样式的权重最高,CSS。而是在错误时动态添加错误类,并在表单字段有效时将其删除。

根据documentation,样式将以降序排列。

  1. 内联样式(在HTML元素内)
  2. 外部和内部样式表(在头部)
  3. 浏览器默认值

这是一个可行的例子

function validate() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    if (username == "") {
        document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
        document.getElementById("username").classList.add("invalidInput");
        return false;
    } else {
        document.getElementById("username").classList.remove("invalidInput")
    }
    if (password == "") {
        document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
        document.getElementById("password").classList.add("invalidInput")
        return false;
    } else {
        document.getElementById("password").classList.remove("invalidInput")
    }
}
#username:focus {
    background-color: yellow;
    border-color: green;
}

#password:focus {
    background-color: yellow;
    border-color: green;
}

.invalidInput {
    border-color: red; 
}

#message {
    color: red;
}
<form onsubmit=" return validate()">
    LOGIN:-
    <br />
    <input id="username" type="text" name="username" placeholder="USERNAME" />
    <br />
    <input id="password" type="password" name="password" placeholder="PASSWORD" />
    <br />
    <input type="submit" value="SUBMIT" />
    <p id="message"></p>
</form>

答案 1 :(得分:1)

问题在于颜色对css的重要性相同,因此代码不知道优先哪个颜色。因此,要解决此问题,您必须在css代码中使绿色变得更加重要。

为此,请将焦点CSS代码更改为如下所示。

#username:focus {
  background-color: yellow !important;
  border-color: green !important;
}

#password:focus {
  background-color: yellow !important;
  border-color: green !important;
}

#message {
  color: red;
}

希望这会有所帮助!

答案 2 :(得分:0)

您只需在键盘上还原边框颜色并创建一个新的类error即可将边框颜色覆盖为红色

function retainColor(ele){
  ele.style.borderColor = "inherit";
  document.getElementById("message").innerHTML = "";
}
function validate() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username == "") {

    document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
    document.getElementById("username").classList.add("error");
    return false;
  }else{
    document.getElementById("username").classList.remove("error");
  }
  if (password == "") {
    document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
    document.getElementById("password").classList.add("error");
    return false;
  }else{
    document.getElementById("password").classList.remove("error");
  }

}
#username:focus {
  background-color: yellow;
  border-color: green;
}

#password:focus {
  background-color: yellow;
  border-color: green;
}
.error {
  border-color: red;
}

.error {
  border-color: red;
}

#message {
  color: red;
}
<form onsubmit=" return validate()">
  LOGIN:-
  <br>
  <input id="username" type="text" onkeyup="retainColor(this)" name="username" placeholder="USERNAME">
  <br>
  <input id="password" type="password" onkeyup="retainColor(this)" name="password" placeholder="PASSWORD">
  <br>
  <input type="submit" value="SUBMIT">
  <p id="message">

</form>

答案 3 :(得分:0)

只需添加onfocus属性

JavaScript

function validate() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username == "") {

    document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
    document.getElementById("username").style.borderColor = "red";
    return false;
  }
  if (password == "") {


    document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
    document.getElementById("password").style.borderColor = "red";
    return false;
  }

}

function myfunction(var id){
 document.getElementById(id).style.borderColor = "green";
 document.getElementById(id).style.background-color= "yellow";
}

HTML

<form onsubmit=" return validate()">
  LOGIN:-
  <br>
  <input id="username" type="text" onfocus="myFunction('username')" name="username" placeholder="USERNAME">
  <br>
  <input id="password" type="password" onfocus="myFunction('password')" name="password" placeholder="PASSWORD">
  <br>
  <input type="submit" value="SUBMIT">
  <p id="message">

</form>

答案 4 :(得分:0)

您正在通过JS设置颜色,但从未取消设置颜色,因此本质上是永久设置它们。

一种停止该行为的方法是还添加另一个函数,以捕获文本字段的OnClick事件,并在其中单击颜色时“重置”或unset颜色。

在这里查看有关如何开始处理OnClick事件的想法:

https://jsfiddle.net/warunamanjula/qy0hvmyq/1/

答案 5 :(得分:0)

您可以在输入框中使用required,而在CSS中使用:invalid来代替从javascript中添加颜色。检查代码段

function validate() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username == "") {

    document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
    //document.getElementById("username").style.borderColor = "red";
    return false;
  }
  if (password == "") {


    document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
    //document.getElementById("password").style.borderColor = "red";
    return false;
  }

}
#username:focus{
  background-color: yellow;
  border-color: green;
}

#username:invalid{
  background-color: none;
  border-color: red;
}

#password:focus{
  background-color: yellow;
  border-color: green;
}
#password:invalid{
  background-color: none;
  border-color: red;
}


#message {
  color: red;
}
<form onsubmit=" return validate()">
  LOGIN:-
  <br>
  <input id="username" type="text" name="username" placeholder="USERNAME" required>
  <br>
  <input id="password" type="password" name="password" placeholder="PASSWORD" required>
  <br>
  <input type="submit" value="SUBMIT">
  <p id="message">

</form>

答案 6 :(得分:-1)

因为当您从javascript或css的任何属性中添加颜色时,它是内联添加的,所以只需写焦点border-color !important