删除先前设置的边框颜色

20

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）。
但是，当我再次将重点放在文本字段上时，红色边框颜色不会消失，而是同时出现了绿色和红色边框。

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

javascript html css

— 超级阿迪
source

10

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

根据文档，样式将以降序排列。

内联样式（在HTML元素内）
外部和内部样式表（在头部）
浏览器默认

这是一个有效的例子

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>

展开摘要

— 尼采什
source

1

应该接受这个答案，因为添加！important不是一个好方法

— Piyush

1

重量已经是您要查找的词，无需添加-age后缀。

— 伊曼纽尔·文提拉（EmanuelVintilă），

3

问题在于颜色对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;
}

希望这可以帮助！

— 奥斯汀·李希利
source

虽然这解决了问题，但我感到困惑，为什么在用新值重置属性时会出现优先级问题？

— Tick20

检查@Geetanjali的答案。正确地处理了您所说的话。

— 哈里·达斯

这是一个好问题。这是因为在CSS中，当您添加诸如“焦点”之类的属性时，您是在该元素上添加了一个侦听器，而不是使用新值对其进行了重置。因此，该属性仅在您专注于该元素时才有效。

— 奥斯汀·利赫利

1

而是从javascript添加颜色，您可以在输入框中使用required，而在CSS中使用：invalid。检查代码段

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>

展开摘要

— 西瓦Rm K
source

1

您可以简单地在键盘上还原边框颜色并创建一个新类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>

展开摘要

— 吉塔尼亚利
source

!important在CSS中向元素添加属性会使样式在任何情况下均不可更新。

— Nitheesh

0

您是通过JS设置颜色的，但是永远不要取消设置颜色，因此从本质上讲，它们是永久设置的。

阻止此行为的一种方法是还添加另一个函数，以捕获OnClick文本字段的事件，并unset在内部单击它们时“重置”或颜色。

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

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

— 斯科特·埃尔布林
source

0

只需添加onfocus属性

Java脚本

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>

— 哈桑·纳瑟
source

-1

因为当您从javascript或css的任何属性中添加颜色时，它是内联添加的，因此只需编写focus即可border-color !important。

— 斯里安·索拉比（Srijan Saurabh）
source