recherche

Maison >interface Web >js tutoriel >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中世界最好的语言
php中世界最好的语言original
2018-06-07 11:32:362794parcourir

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment appeler des méthodes dans vueArticle suivant：Comment appeler des méthodes dans vue

Articles Liés

Voir plus