Comment afficher et masquer les mots de passe à l'aide de jQuery et JavaScript

L'article suivant vous présentera comment afficher et masquer les mots de passe à l'aide de jQuery et JavaScript. J'espère qu'il vous sera utile.

Pour la sécurité du compte, nous définissons toujours le mot de passe pour qu'il soit très complexe ; lors de la saisie du mot de passe, car le mot de passe n'est pas affiché, nous ne savons pas si la saisie est correct ou non, cela peut provoquer des erreurs d'authentification. En conséquence, les sites Web permettent désormais aux utilisateurs d’afficher le texte masqué dans les champs de mot de passe.

L'exemple de code suivant présente comment utiliser jQuery et JavaScript pour afficher et masquer les mots de passe. [Tutoriels vidéo associés recommandés : Tutoriel JavaScript, Tutoriel jQuery]

Code HTML : nous devons d'abord créer une mise en page de formulaire de base

<table>
 <tr>
  <td>Username : </td>
  <td><input type=&#39;text&#39; id=&#39;username&#39; ></td>
 </tr>
 <tr>
  <td>Password : </td>
  <td><input type=&#39;password&#39; id=&#39;password&#39; > 
     <input type=&#39;checkbox&#39; id=&#39;toggle&#39; value=&#39;0&#39; onchange=&#39;togglePassword(this);&#39;>  <span id=&#39;toggleText&#39;>Show</span></td>
 </tr>
 <tr>
  <td> </td>
  <td><input type=&#39;button&#39; id=&#39;but_reg&#39; value=&#39;Sign Up&#39; ></td>
 </tr>
</table>

Instructions : Attachez l'événement onchange="togglePassword()" à l'élément check box et appelez le code js pour changer l'affichage (ou masquer) du mot de passe

1 . Utiliser l'implémentation JavaScript de

<script type="text/javascript">
 
 function togglePassword(el){
 
  // Checked State
  var checked = el.checked;
  if(checked){
   // Changing type attribute
   document.getElementById("password").type = &#39;text&#39;;
   // Change the Text
   document.getElementById("toggleText").textContent= "Hide";
  }else{
   // Changing type attribute
   document.getElementById("password").type = &#39;password&#39;;
   // Change the Text
   document.getElementById("toggleText").textContent= "Show";
  }
 }
 
</script>

Description :

Vérifiez si l'état de la case à cocher est sélectionné. Si elle est sélectionnée, l'attribut type de la zone de saisie passe à. text S’il n’est pas sélectionné, l’attribut type reste password .

Rendu :

2. Utilisez jQuery pour implémenter

Importez la bibliothèque jQuery

<script type="text/javascript" src="jquery.min.js" ></script>

Utilisez la méthode attr() de jQuery pour modifier l'attribut type de l'élément d'entrée.

<script type="text/javascript">
 
$(document).ready(function(){
 $("#toggle").change(function(){
  
  // Check the checkbox state
  if($(this).is(&#39;:checked&#39;)){
   // Changing type attribute
   $("#password").attr("type","text");
   
   // Change the Text
   $("#toggleText").text("隐藏密码");
  }else{
   // Changing type attribute
   $("#password").attr("type","password");
  
   // Change the Text
   $("#toggleText").text("显示密码");
  }
 
 });
});
 
</script>

Sortie :

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

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!