이전에 설정 한 테두리 색상 제거

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  html  css 
— 수퍼 아디
소스

답변:

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
! important를 추가하는 것은 좋은 접근 방식이 아니기 때문에 대답이 받아 들여 져야합니다.
— Piyush
1
weight는 이미 찾고있는 단어이므로 -age 접미사를 추가 할 필요가 없습니다.
— Emanuel Vintilă
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'와 같은 속성을 추가 할 때 해당 요소에 리스너를 추가하고 새로운 값으로 재설정하지 않기 때문입니다. 따라서 속성은 해당 요소에 집중할 때만 적용됩니다.
— Austin Leehealey
1

자바 스크립트에서 색상을 추가하는 대신 입력 상자에 필요하고 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
소스
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를 통해 색상을 설정하고 있지만 설정을 해제하지 않으므로 본질적으로 영구적으로 설정됩니다.

이 동작을 중지하는 한 가지 방법 OnClick은 텍스트 필드 의 이벤트 를 포착 하고 "재설정"하거나 다른 기능을 추가하는 것 입니다.unset 내부를 클릭 할 때 색상 입니다.

OnClick이벤트 처리를 시작하는 방법에 대한 아이디어를 보려면 여기를 살펴보십시오 .

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

— 스콧 엘 블린
소스
0

onfocus속성 추가

자바 스크립트

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.