JS implémente des invites de texte gris dans la zone de saisie-js tutoriel-php.cn

JS implémente des invites de texte gris dans la zone de saisie

php中世界最好的语言

Libérer： 2018-06-07 11:32:36

original

2705 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!