So zeigen und verbergen Sie Passwörter mit jQuery und JavaScript

Der folgende Artikel zeigt Ihnen, wie Sie Passwörter mit jQuery und JavaScript anzeigen und ausblenden. Ich hoffe, dass er Ihnen weiterhilft.

Aus Gründen der Kontosicherheit stellen wir das Passwort bei der Passworteingabe immer sehr komplex ein, da das Passwort nicht angezeigt wird, wissen wir nicht, ob die Eingabe erfolgt Ob es richtig ist oder nicht, es kann zu Authentifizierungsfehlern kommen. Aus diesem Grund können Benutzer jetzt auf Websites die Option aktivieren, um versteckten Text in Passwortfeldern anzuzeigen.

Das folgende Codebeispiel stellt vor, wie man jQuery und JavaScript zum Ein- und Ausblenden von Passwörtern verwendet. [Empfohlene verwandte Video-Tutorials: JavaScript-Tutorial, jQuery-Tutorial]

HTML-Code: Zuerst müssen wir ein grundlegendes Formularlayout erstellen

<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>

Anleitung: Hängen Sie das Ereignis onchange="togglePassword()" an das Kontrollkästchenelement an und rufen Sie den JS-Code auf, um die Anzeige (oder Ausblendung) des Passworts umzuschalten

1 Zu implementierendes JavaScript

<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>

Anleitung:

Überprüfen Sie, ob das Kontrollkästchen aktiviert ist. Wenn es aktiviert ist, wechselt das Typattribut des Eingabefelds zu Text , das Typattribut bleibt passwort.

Rendering:

2. Verwenden Sie jQuery zum Implementieren

Importieren Sie die jQuery-Bibliothek

<script type="text/javascript"  ></script>

Ändern Sie das Typattribut des Eingabeelements mit der attr()-Methode von jQuery.

<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>

Ausgabe:

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Lernen aller hilfreich sein wird. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonSo zeigen und verbergen Sie Passwörter mit jQuery und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!