以前に設定した境界線の色を削除します

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 
— SuperAadi
ソース

回答:

10

これは、CSSクラスプロパティではなく要素スタイルを更新したために発生しています。要素スタイルはの最も高いウェイトを持っていCSSます。代わりに、エラー時に動的にエラークラスを追加し、フォームフィールドが有効なときにそれを削除します。

あたりとして文書、降順でのスタイルの順序になります。

  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
重要な追加は良いアプローチではないので、これは受け入れられるべき答えです
— Piyush
1
重みはすでに探している単語なので、-ageサフィックスを追加する必要はありません。
— EmanuelVintilă19年
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;
}

お役に立てれば！

— オースティンリーヒーリー
ソース
これで問題は解決しますが、混乱します。なぜプロパティを新しい値でリセットすると優先順位の問題が発生するのですか？
— Tick20
@Geetanjaliの回答を確認してください。それはあなたが言っていることを正しく処理します。
— Hari Das
それは良い質問です。これは、CSSで 'focus'などの属性を追加するときに、その要素にリスナーを追加しているので、新しい値でリセットしないためです。したがって、属性は、その要素に焦点を合わせている場合にのみ有効です。
— オースティンリーヒーリー
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>
スニペットを展開

— Siva Rm K
ソース
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>
スニペットを展開

— ジータンジャリ
ソース
!importantCSSの要素にプロパティを追加すると、どのインスタンスでもスタイルを更新できなくなります。
— Nitheesh
0

JSを介して色を設定していますが、設定を解除することはないため、基本的には永続的に設定されています。

この動作を停止する1つの方法OnClickは、テキストフィールドのイベントをキャッチする別の関数を追加しunset、それらがクリックされたときに「リセット」または色を追加することです。

OnClickイベントの処理を開始する方法については、こちらをご覧ください。

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

— J.スコットエルブレイン
ソース
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>
— Hasan_Naser
ソース
-1

JavaScriptまたはcssの任意のプロパティから色を追加すると、インラインで追加されるため、focusと書くだけborder-color !importantです。

— スリジャン・サウラブ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.