快捷導(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)代碼之前，先給大家展示下效果圖：

這里寫圖片描述

<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)文章

JavaScript 數(shù)組遍歷的五種方法
這篇文章主要介紹了JavaScript 數(shù)組遍歷的五種方法，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下
2021-03-03
js, jQuery實(shí)現(xiàn)全選、反選功能
本文主要介紹了js, jQuery實(shí)現(xiàn)全選、反選功能的方法，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
JavaScript享元模式原理與用法實(shí)例詳解
這篇文章主要介紹了JavaScript享元模式原理與用法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript享元模式基本概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
淺談通過(guò)JS攔截 pushState和replaceState事件
下面小編就為大家?guī)?lái)一篇淺談通過(guò)JS攔截 pushState和replaceState事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
javascript 判斷中文字符長(zhǎng)度的函數(shù)代碼
在很多時(shí)候,我們?cè)谶M(jìn)行數(shù)據(jù)提交數(shù)據(jù)庫(kù)時(shí).先會(huì)用javascript對(duì)其進(jìn)行有效性驗(yàn)證.如一個(gè)中文javascript為的length是1.但是數(shù)據(jù)庫(kù)中會(huì)占二個(gè)字節(jié).容易出錯(cuò)
2012-08-08
微信公眾平臺(tái)獲取access_token的方法步驟
這篇文章主要介紹了微信公眾平臺(tái)獲取access_token的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
在JavaScript中調(diào)用OpenAI?API的詳細(xì)步驟
在?JavaScript?中調(diào)用?OpenAI?API?也非常簡(jiǎn)單,下面我將結(jié)合具體代碼示例以及使用場(chǎng)景,詳細(xì)講解如何使用?JavaScript?調(diào)用?OpenAI?API,需要的朋友可以參考下
2025-04-04
Javascript Function對(duì)象擴(kuò)展之延時(shí)執(zhí)行函數(shù)
這篇文章主要介紹在js里面怎么延時(shí)執(zhí)行一個(gè)函數(shù)?
2010-07-07
用javascript連接access數(shù)據(jù)庫(kù)的方法
用javascript連接access數(shù)據(jù)庫(kù)的方法...
2006-11-11
第九篇Bootstrap導(dǎo)航菜單創(chuàng)建步驟詳解
這篇文章主要介紹了Bootstrap導(dǎo)航菜單創(chuàng)建步驟詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06