Zone de saisie de la balise d'entrée avec méthode de texte d'invite

Cet article présente principalement la balise de saisie pour implémenter la zone de saisie avec effet de texte rapide (deux méthodes). Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Méthode 1 : HTML5 coopère avec CSS3 pour implémenter une zone de saisie avec un texte d'invite (débarrassez-vous de js)

Un CSS unique à webkit, qui peut contrôler le style du texte à l'intérieur ; et coopérer avec l'animation des effets CSS3 et des pseudo-classes, nous pouvons facilement créer une zone de saisie animée, ce qui est très approprié pour la connexion au système, la recherche, etc. Si vous êtes intéressé, vous pouvez vous référer à cet article, qui pourra peut-être pour vous aider. Webkit est utilisé comme support pour développer le système. Bien sûr, il est nécessaire d'utiliser largement Html5 et CSS3, ce qui non seulement réduit une grande quantité de JS mais assure également un flux plus fluide.

Lorsque la boîte de dialogue est sélectionnée, le texte de l'invite devient plus clair et disparaît après la saisie. La pratique courante consiste désormais à ajouter une étiquette après l'étiquette d'entrée. Utilisez le contrôle JS.

Avec l'avènement du HTML5, nous avons une meilleure solution.

<input type="text" placeholder="用户名或邮件地址" name="username"/>

Vérifiez qu'il existe une balise d'espace réservé, qui peut être utilisée comme invite de texte utilisateur. C'est très pratique. Mais pour être le plus parfait, nous devons alléger le texte ou modifier le style du fichier d'invite après l'avoir sélectionné. Que devons-nous faire ?

input::-webkit-input-placeholder { 
color: #999; 
-webkit-transition: color.5s; 
} 
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder { 
color: #c2c2c2; 
-webkit-transition: color.5s; 
}

-webkit-input-placeholder, un CSS unique à webkit, peut contrôler le style du texte à l'intérieur. Avec les effets d'animation et les pseudo-classes de CSS3, nous pouvons facilement créer une zone de saisie animée, qui. est très approprié pour la connexion au système, la recherche, etc. Bien entendu, pour être compatible avec IE6, cette méthode ne fonctionnera pas. Cependant, Ie9 prend également en charge les balises d'espace réservé, mais sa couleur ne peut pas être modifiée.
Alors, que dois-je faire s'il n'est pas pris en charge ? Vous pouvez simplement utiliser Jquery directement pour vous aider, cela dépasse donc le cadre de cet article.

Donnez-moi une démo. L'adresse de démonstration doit être utilisée dans un navigateur Webkit pour voir le plein effet. N'est-ce pas très pratique ?

Deuxième méthode : js control ;

Le code est le suivant :

<script type="text/javascript">
 $(document).ready(function(){
 $("#focus .input_txt").each(function(){
  var thisVal=$(this).val();
  //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  //聚焦型输入框验证 
  $(this).focus(function(){
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
   $(this).siblings("span").hide();
  }else{
   $(this).siblings("span").show();
  } 
  });
 })
 $("#keydown .input_txt").each(function(){
  var thisVal=$(this).val();
  //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  $(this).keyup(function(){
  var val=$(this).val();
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
   $(this).siblings("span").hide();
  }else{
   $(this).siblings("span").show();
  }
  })
  }) 
 })
</script>

L'effet est tel qu'indiqué ;

Lorsque vous cliquez dessus, le texte d'invite disparaît ; lorsque le focus est perdu, le texte d'invite apparaît, mais après la saisie du contenu, le texte d'invite ne s'affiche pas également lorsque le focus est perdu, la zone de mot de passe est différente du texte ; et la valeur de la zone Mot de passe n'est pas affichée.

Méthode 3 : Écrire directement sur l'étiquette (c'est plus pratique)

Le code est le suivant :

<input type="text" value="提示内容。。。" onFocus="if(value==defaultValue){value=&#39;&#39;;this.style.color=&#39;#000&#39;}" onBlur="if(!value){value=defaultValue;this.style.color=&#39;#999&#39;}" style ="#999;"/>
    </p>

Recommandations associées :

La solution parfaite pour le texte d'invite de la zone de saisie de la zone de texte en HTML qui doit ajouter du contenu par défaut

Méthode JS d'affichage de l'invite de la zone de texte compétences text_javascript

Le plug-in jQuery EnPlaceholder implémente l'invite de la zone de saisie text_jquery

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!