recherche

Maison >interface Web >js tutoriel >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中世界最好的语言
php中世界最好的语言original
2018-06-02 16:01:382203parcourir

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!

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 restaurer la fonctionnalité de clic sur un bouton à l'aide du compte à rebours JSArticle suivant：Comment restaurer la fonctionnalité de clic sur un bouton à l'aide du compte à rebours JS

Articles Liés

Voir plus