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

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

WBOY
WBOY원래의
2016-05-16 17:00:212735검색

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"
})
}





성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.