快捷導(dǎo)航

JS實(shí)現(xiàn)登錄頁(yè)密碼的顯示和隱藏功能

更新時(shí)間：2017年12月06日 14:27:06 作者：w冰淇淋

在登錄頁(yè)經(jīng)常會(huì)用到通過(guò)點(diǎn)擊文本框的類似小眼睛圖片來(lái)實(shí)現(xiàn)隱藏顯示密碼的功能。下面給大家介紹基于JS實(shí)現(xiàn)登錄頁(yè)密碼的顯示和隱藏功能，需要的朋友參考下吧

在登錄頁(yè)經(jīng)常會(huì)用到通過(guò)點(diǎn)擊文本框的類似小眼睛圖片來(lái)實(shí)現(xiàn)隱藏顯示密碼的功能，其實(shí)實(shí)現(xiàn)原理很簡(jiǎn)單，通過(guò)點(diǎn)擊事件來(lái)改變input的type類型，具體過(guò)程看代碼：

在沒(méi)給大家分享實(shí)現(xiàn)代碼之前，先給大家展示下效果圖：

這里寫(xiě)圖片描述

<ul class="form-area">
 <li>
  <div class="item-content">
   <div class="item-input">
    <input type="text" name="accountName" autofocus required="required" placeholder="請(qǐng)輸入用戶名">
   </div>
  </div>
 </li>
 <li>
  <div class="item-content">
   <div class="item-input">
     <input type="password" name="password" id="password" required="required" placeholder="請(qǐng)輸入密碼">
   </div>
  </div>
 </li>
 <li>
  <span style="position:absolute;right: 20px;top: -38px">
   <img id="showText" onclick="hideShowPsw()">
  </span>
 </li>
</ul>

<script type="text/javascript">
//獲取input框內(nèi)的切換圖片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>

總結(jié)

以上所述是小編給大家介紹的JS實(shí)現(xiàn)登錄頁(yè)密碼的顯示和隱藏，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JS生成隨機(jī)字符串的多種方法
這篇文章主要介紹了JS生成隨機(jī)字符串的方法,需要的朋友可以參考下
2014-06-06
Javascript 字符串模板的簡(jiǎn)單實(shí)現(xiàn)
這篇文章給大家描述的是如何一步步簡(jiǎn)單的實(shí)現(xiàn)Javascript 字符串模板，對(duì)于初學(xué)javascript的菜鳥(niǎo)們來(lái)說(shuō)應(yīng)該是篇不錯(cuò)的文章，希望對(duì)大家能夠有所幫助。
2016-02-02
原生javascript圖片自動(dòng)或手動(dòng)切換示例附演示源碼
圖片自動(dòng)或手動(dòng)切換，想必會(huì)在很多地方有見(jiàn)過(guò)吧，本文將為大家介紹的是使用原生javascript實(shí)現(xiàn)的焦點(diǎn)圖切換，感興趣的朋友可以參考下
2013-09-09
JavaScript String 對(duì)象常用方法總結(jié)
下面小編就為大家?guī)?lái)一篇JavaScript String 對(duì)象常用方法總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
2016-04-04
JavaScript閉包實(shí)例詳解
這篇文章主要介紹JavaScript閉包知識(shí)，包括閉包的基本概念，閉包的用途等相關(guān)知識(shí)，介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-06-06
JavaScript通過(guò)this變量快速找出用戶選中radio按鈕的方法
這篇文章主要介紹了JavaScript通過(guò)this變量快速找出用戶選中radio按鈕的方法,涉及javascript中this變量的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-03-03
基于Cesium繪制柵欄的示例代碼
這篇文章主要介紹了如何利用Cesium繪制柵欄效果的示例代碼，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定的幫助，需要的可以參考一下
2022-06-06
ES6使用export和import實(shí)現(xiàn)模塊化的方法
這篇文章主要介紹了ES6使用export和import實(shí)現(xiàn)模塊化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
JavaScript 一行代碼,輕松搞定浮動(dòng)快捷留言-V2升級(jí)版
前天熬了大半宿發(fā)了一篇[一行代碼輕松搞定快捷留言功能]，同時(shí)發(fā)布了V1.0beta版的快捷留言功能和源代碼，之所以是beta版，就是當(dāng)時(shí)感覺(jué)雖然基本功能有了，但是還不夠完善，特性也不一定合理
2010-04-04
JS實(shí)現(xiàn)簡(jiǎn)單日歷特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單日歷特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01