Maison > Article > interface Web > Comment utiliser JS pour réaliser le texte d'invite d'attribut d'espace réservé en HTML
Comment utiliser JS pour réaliser le texte d'invite d'attribut d'espace réservé en HTML
- php中世界最好的语言original
- 2018-06-02 16:01:382106parcourir
Cette fois, je vais vous montrer comment utiliser JS pour réaliser le texte d'invite d'attribut d'espace réservé en HTML. Quelles sont les précautions pour utiliser JS pour implémenter le texte d'invite d'attribut d'espace réservé en HTML. cas. Jetons un coup d'oeil.
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>
L'effet d'exécution est le suivant :
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>www.jb51.net 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 présenté 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 :
Comment utiliser Vue pour écrire une liaison de données bidirectionnelle
Comment utiliser Vue pour mettre en place un bouton de compte à rebours
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!