Maison > Article > interface Web > JS implémente des invites de texte gris dans la zone de saisie
JS implémente des invites de texte gris dans la zone de saisie
- php中世界最好的语言original
- 2018-06-07 11:32:362707parcourir
Cette fois, je vais vous proposer JS pour implémenter des invites de texte gris dans la zone de saisie. Quelles sont les précautions à prendre pour que JS implémente des invites de texte gris dans la zone de saisie ?
Comment implémenter l'effet d'attribut d'espace réservé du HTML via js
Nous devons faire ceci :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现placeholder属性效果</title>
<script>
function bl(){
var a=document.getElementById("inpt");
if(a.value.length<=0){
a.style.color="#999999";
a.value="请输入姓名";
}
}
function fo(){
var a=document.getElementById("inpt");
if(a.value=="请输入姓名"){
a.style.color="black";
a.value="";
}
}
</script>
</head>
<body>
<input style="color: #999999;" value="请输入姓名" id="inpt" type="text" onblur="bl()" onfocus="fo()" />
</body>
</html>
Supplément :
Voici un autre exemple de l'effet d'attribut d'espace réservé implémenté par jQuery :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现placeholder属性效果</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<input style="color: #999999;" data-value="请输入姓名" id="inpt" type="text"/>
<script>
function placeHolder(event){
var self = $(this), selfDataValue = self.attr("data-value"), selfValue = self.val();
if(selfDataValue){
event.type == "click" ? (selfValue == selfDataValue && (self.val("").css("color","#333"))) : (event.type == "blur" && (selfValue == "" && (self.val(selfDataValue).css("color","#A9A9A9"))))
}else{
return false;
}
}
$("#inpt").on("click blur",placeHolder);
</script>
</body>
</html>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !
Lecture recommandée :
Utilisez jquery pour obtenir le contenu spécifique des fichiers téléchargés
Utilisez les classes ES6 pour imiter Vue pour faire un ensemble de reliure bidirectionnelle
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!