When using HTML+CSS+JavaScript for page production, we often encounter small details that affect the user experience and are easily ignored by us. For example, the prompt information in the INPUT input box can be displayed and hidden based on the object's obtaining and loss of focus. Today, I want to share with you this tips, I hope you will not shoot bricks ~~~
1. Requirement
Input input box, when the cursor is displayed, hides the prompt information; when the cursor leaves the input box, the prompt information is displayed.
2. Method
1. Give the ID name to the input, onFocus = "method name 1 (this)", onblur = "method name 2 (this)"
2. Declarize variable value, get the input through the ID name
3. Function method name 1 (inputObj) {
Copy code code as follows:
if (inputObj.value == "...") {) {
inputObj.value = "";
}
}
4. Function method name 2 (inputObj) {
Copy code code as follows:
if (inputObj.value == "" ") {{
inputObj.value = "...";;;
}
}
5. Note: If there are multiple INPUT tags in the same page that requires the same setting, the method name cannot be consistent.
Third, instance
Copy code code as follows:
<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<Title> Non -Title Document </Title>
<link href = "file: /// e |/Midi/css/index.css" type = "text/css" rel = "styleSheet"/>/>
<script type = "text/javascript">
var value = document.GetelementByid ('shuru');
Function qingkong (inputObj) {{
if (inputObj.value == "Please enter your name") {{
inputObj.value = "";
}
}
Function likai (inputObj) {
if (inputObj.value == '') {
inputObj.value = "Please enter your name";
}
}
</script>
<Style Type = "Text/CSS">
/*The text below can change the background color of the input box in the IE browser*/
.search input {star: expression
this.style.backgroundcolor = "#ff0000"
},
onmouseout = function () {
This.style.backgroundColor = "#FFFFFF"
})
}
</style>
</head>
<body>
<input type = "text" id = "shuru" value = "Please enter the song name or singer name" onFocus = "qingkong (this)" onblur = "likai (this)"/>
</body>
</html>