Cuando usamos HTML+CSS+JavaScript para la producción de páginas, a menudo encontramos pequeños detalles que afectan la experiencia del usuario y nos ignoramos fácilmente. Por ejemplo, la información rápida en el cuadro de entrada de entrada se puede mostrar y ocultar en función de la obtención y la pérdida de enfoque del objeto. Hoy, quiero compartir con ustedes estos consejos, espero que no disparen ladrillos ~~~
1. Requisito
Cuadro de entrada de entrada, cuando se muestra el cursor, oculta la información de inmediato;
2. Método
1. Dé el nombre de ID a la entrada, Onfocus = "Nombre del método 1 (this)", onblur = "Nombre del método 2 (esto)"
2. Declarar valor variable, obtener la entrada a través del nombre de ID
3. Nombre del método de función 1 (inputobj) {
Copiar código del código de la siguiente manera:
if (inputobj.value == "...") {) {
inputobj.Value = "";
}
}
4. Nombre del método de función 2 (inputobj) {
Copiar código del código de la siguiente manera:
if (inputobj.Value == "" ") {{
inputobj.value = "..." ;;;
}
}
5. Nota: Si hay varias etiquetas de entrada en la misma página que requiere la misma configuración, el nombre del método no puede ser consistente.
Tercero, instancia
Copiar código del código de la siguiente manera:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-oquiv = "content-type" content = "text /html; charset = utf-8" /> />
<title> Documento no -tito </title>
<Link href = "archivo: /// e | /midi/css/index.css" type = "text/css" rel = "stylesheet"/>/>
<script type = "text/javaScript">
value var = document.getElementById ('shuru');
Función qingkong (inputobj) {{
if (inputobj.Value == "Por favor ingrese su nombre") {{
inputobj.Value = "";
}
}
Function likai (inputobj) {
if (inputobj.Value == '') {
inputobj.value = "Por favor ingrese su nombre";
}
}
</script>
<Style type = "text/css">
/*El texto a continuación puede cambiar el color de fondo del cuadro de entrada en el navegador IE*/
.Search Entrada {Star: Expression
this.style.backgroundcolor = "#FF0000"
},
onMouseOut = function () {
This.style.backgroundcolor = "#ffffff"
})
}
</style>
</ablo>
<Body>
<input type = "text" id = "shuru" value = "Por favor ingrese el nombre de la canción o el nombre del cantante" onfocus = "qingkong (this)" onblur = "likai (this)"/>
</body>
</html>