입력 상자_javascript 기술에서 프롬프트 정보 표시 및 숨기기를 제어하는 ​​방법

html css javascrpt를 사용하여 페이지를 만들 때 사용자 경험에 영향을 미치고 쉽게 간과되는 몇 가지 작은 세부 사항을 자주 접하게 됩니다. 예를 들어, 입력 상자의 프롬프트 정보는 개체의 초점 획득 및 상실에 따라 어떻게 표시되거나 숨겨질 수 있습니까? 저는 오늘 이 작은 트릭을 여러분과 공유하고 싶습니다. 모든 고수들이 실수하지 않기를 바랍니다~~~

1. 요구 사항

입력 상자, 프롬프트 정보 숨기기 커서가 표시될 때 ; 커서가 입력 상자를 벗어나면 프롬프트 메시지가 표시됩니다.

2. 메소드

1. 입력에 ID 이름을 지정합니다. Onfocus="메소드 이름 1(this)", onblur="메소드 이름 2(this)"

2. 변수 값을 선언하고 id 이름으로 입력을 받습니다

3. 함수 메서드 이름 1 (inputObj){

코드 복사 코드는 다음과 같습니다.

if(inputObj.value==”…”){

inputObj.value=”””;
}

}

4. 함수 메소드 이름 2(inputObj){

코드 복사 코드는 다음과 같습니다.

if(inputObj.value==””){

inputObj.value="…”;

}

}

5. 참고: 동일한 설정이 필요한 동일한 페이지에 입력 태그가 여러 개 있는 경우 메서드 이름이 일관될 수 없습니다.

3. 예시

코드 복사 코드는 다음과 같습니다.

;html xmlns ="http://www.w3.org/1999/xhtml">




style type="text/css">
/*다음 텍스트는 IE 브라우저에서 입력 상자의 배경색을 변경할 수 있습니다*/
.search input{star : 표현식(onmouseover =function(){
this.style.BackgroundColor="#FF0000"
},
onmouseout=function(){
this.style.BackgroundColor="#FFFFFF"
})
}