Lorsque vous utilisez HTML + CSS + JavaScript pour la production de pages, nous rencontrons souvent de petits détails qui affectent l'expérience utilisateur et sont facilement ignorés par nous. Par exemple, les informations rapides dans la zone d'entrée d'entrée peuvent être affichées et masquées en fonction de l'obtention et de la perte de focus de l'objet. Aujourd'hui, je veux partager avec vous ces conseils, j'espère que vous ne tirerez pas de briques ~~~
1. Exigence
La boîte d'entrée d'entrée, lorsque le curseur est affiché, cache les informations rapides;
2. Méthode
1. Donnez le nom d'ID à l'entrée, onfocus = "Nom de la méthode 1 (this)", onblur = "Nom de la méthode 2 (this)"
2. Déclarer la valeur de la variable, obtenir l'entrée via le nom de l'ID
3. Nom de la méthode de la fonction 1 (inputoBj) {
Copier le code du code comme suit:
if (inputoBj.value == "...") {) {
inputoBj.value = "";
}
}
4. Nom de la méthode de la fonction 2 (inputoBj) {
Copier le code du code comme suit:
if (inputoBj.value == "" ") {{
inputoBj.Value = "..." ;;;
}
}
5. Remarque: S'il y a plusieurs balises d'entrée dans la même page qui nécessite le même paramètre, le nom de la méthode ne peut pas être cohérent.
Troisièmement, par exemple
Copier le code du code comme suit:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = utf-8" /> />
<Title> Document non-title </TITME>
<link href = "file: /// e | /midi/css/index.css" type = "text / css" rel = "Stylesheet" /> />
<script type = "text / javascript">
var valeur = document.getElementById ('shuru');
Fonction Qingkong (inputoBj) {{
if (inputoBj.value == "Veuillez entrer votre nom") {{
inputoBj.value = "";
}
}
Fonction likai (inputoBj) {
if (inputoBj.value == '') {
inputoBj.value = "Veuillez entrer votre nom";
}
}
</cript>
<Style type = "text / css">
/ * Le texte ci-dessous peut modifier la couleur d'arrière-plan de la zone d'entrée dans le navigateur IE * /
.Search Input {Star: Expression
this.style.backgroundcolor = "# ff0000"
},
onMouseout = function () {
This.style.backgroundcolor = "#ffffff"
})
}
</ style>
</ head>
<body>
<input type = "text" id = "shuru" value = "s'il vous plaît entrez le nom de la chanson ou le nom du chanteur" onfocus = "Qingkong (this)" onblur = "likai (this)" />
</docy>
</html>