在JS中如何實現登入頁密碼的顯示與隱藏

在登入頁經常會用到透過點擊文字方塊的類似小眼睛圖片來實現隱藏顯示密碼的功能。以下為大家介紹基於JS實現登入頁密碼的顯示和隱藏功能，需要的朋友參考下吧

在登入頁經常會用到透過點擊文字方塊的類似小眼睛圖片來實現隱藏顯示密碼的功能，其實實作原理很簡單，透過點擊事件來改變input的type類型，具體過程看程式碼：

#在沒跟大家分享實作程式碼之前，先向大家展示下效果圖：

<ul class="form-area">
 <li>
  <p class="item-content">
   <p class="item-input">
    <input type="text" name="accountName" autofocus required="required" placeholder="请输入用户名">
   </p>
  </p>
 </li>
 <li>
  <p class="item-content">
   <p class="item-input">
     <input type="password" name="password" id="password" required="required" placeholder="请输入密码">
   </p>
  </p>
 </li>
 <li>
  <span style="position:absolute;right: 20px;top: -38px">
   <img  id="showText" onclick="hideShowPsw()" alt="在JS中如何實現登入頁密碼的顯示與隱藏" >
  </span>
 </li>
</ul>

<script type="text/javascript">
//获取input框内的切换图片id和input文本框的id
 var demoImg = document.getElementById("showText");
 var demoInput = document.getElementById("password");
 function hideShowPsw() {
  if (demoInput.type == "password") {
   demoInput.type = "text";
   demoImg.src ="../Images/showPasswd.png";
  } else {
   demoInput.type = "password";
   demoImg.src = "../Images/hidePasswd.png";
  }
 }
</script>

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

Vue專案最佳化需要注意哪些？

在vuejs中使用模組化的方式開發

#在VUE中如何實作陣列更新功能

如何使用vue-cli實作多頁應用程式

以上是在JS中如何實現登入頁密碼的顯示與隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！