페이지 제작에 HTML+CSS+JavaScript를 사용할 때는 종종 사용자 경험에 영향을 미치는 작은 세부 사항을 만나고 쉽게 무시할 수 있습니다. 예를 들어, 입력 입력 상자의 프롬프트 정보를 객체의 획득 및 초점 손실에 따라 표시하고 숨길 수 있습니다. 오늘은이 팁을 공유하고 싶습니다. 벽돌을 쏘지 않기를 바랍니다 ~~~
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. 참고 : 동일한 설정이 필요한 동일한 페이지에 여러 입력 태그가있는 경우 메소드 이름이 일관성이 없습니다.
셋째, 인스턴스
다음과 같이 코드 코드를 복사하십시오.
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" /> />
<title> 비 -타이틀 문서 </title>
<link href = "file : /// e | /midi/css/index.css"type = "text/css"rel = "Stylesheet"/>/>
<script type = "text/javaScript">
var value = document.getElementById ( 'shuru');
함수 Qingkong (inputobj) {{
if (inputobj.value == "이름을 입력하십시오") {{
inputobj.value = "";
}
}
함수 likai (inputobj) {
if (inputobj.value == '') {
inputobj.value = "이름을 입력하십시오";
}
}
</스크립트>
<스타일 유형 = "텍스트/CSS">
/*아래 텍스트는 IE 브라우저에서 입력 상자의 배경색을 변경할 수 있습니다*/
.Search Input {star : 표현
this.style.backgroundcolor = "#ff0000"
},
onMouseOut = function () {
this.style.backgroundcolor = "#ffffff"
})
}
</스타일>
</head>
<body>
<입력 유형 = "text"id = "shuru"value = "노래 이름 또는 가수 이름을 입력하십시오"onfocus = "Qingkong (this)"onblur = "likai (this)"/>
</body>
</html>