Comment utiliser JS pour réaliser le texte d'invite d'attribut d'espace réservé en HTML-js tutoriel-php.cn

Comment utiliser JS pour réaliser le texte d'invite d'attribut d'espace réservé en HTML

php中世界最好的语言

Libérer： 2018-06-02 16:01:38

original

2146 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!