如何使用jQuery和JavaScript顯示和隱藏密碼

下面這篇文章就跟大家分別介紹使用jQuery和JavaScript顯示和隱藏密碼的方法，希望對大家有幫助。

為了帳戶的安全，我們總是會把密碼設定的很複雜；當輸入密碼時，因為密碼的不顯示，我們不知道輸的是對還是錯，有可能導致身份驗證錯誤。因而，現在的網站允許使用者透過切換來查看密碼欄位中的隱藏文字。

以下透過程式碼範例來介紹使用jQuery和JavaScript顯示和隱藏密碼的方法。 【相關影片教學推薦：JavaScript教學、jQuery教學】

#HTML程式碼：首先我們需要建立了基本表單佈局

#

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

說明：在複選框元素上附加onchange="togglePassword()"事件，呼叫js程式碼，實作切換密碼的顯示（或隱藏）

1、使用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>

說明：

檢查複選框的狀態是否為選中，選取則input框的type屬性切換為text，未選取則type屬性保持為password。

效果圖：

2、使用jQuery實作

匯入jQuery函式庫

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

使用jQuery的attr()方法來變更input元素的type屬性。

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

輸出：

以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！ ！ ！

以上是如何使用jQuery和JavaScript顯示和隱藏密碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！