JS實現(xiàn)登錄頁密碼的顯示和隱藏功能
更新時間：2017年12月06日 14:27:06 作者：w冰淇淋
在登錄頁經(jīng)常會用到通過點擊文本框的類似小眼睛圖片來實現(xiàn)隱藏顯示密碼的功能。下面給大家介紹基于JS實現(xiàn)登錄頁密碼的顯示和隱藏功能，需要的朋友參考下吧
在登錄頁經(jīng)常會用到通過點擊文本框的類似小眼睛圖片來實現(xiàn)隱藏顯示密碼的功能，其實實現(xiàn)原理很簡單，通過點擊事件來改變input的type類型，具體過程看代碼：
在沒給大家分享實現(xiàn)代碼之前，先給大家展示下效果圖：
<ul class="form-area">
<li>
<div class="item-content">
<div class="item-input">
<input type="text" name="accountName" autofocus required="required" placeholder="請輸入用戶名">
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-input">
<input type="password" name="password" id="password" required="required" placeholder="請輸入密碼">
</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實現(xiàn)登錄頁密碼的顯示和隱藏，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript 數(shù)組遍歷的五種方法，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下2021-03-03
本文主要介紹了js, jQuery實現(xiàn)全選、反選功能的方法，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了JavaScript享元模式原理與用法,結(jié)合實例形式總結(jié)分析了JavaScript享元模式基本概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-03-03
淺談通過JS攔截 pushState和replaceState事件
下面小編就為大家?guī)硪黄獪\談通過JS攔截 pushState和replaceState事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
在很多時候,我們在進行數(shù)據(jù)提交數(shù)據(jù)庫時.先會用javascript對其進行有效性驗證.如一個中文javascript為的length是1.但是數(shù)據(jù)庫中會占二個字節(jié).容易出錯2012-08-08
這篇文章主要介紹了微信公眾平臺獲取access_token的方法步驟,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
在JavaScript中調(diào)用OpenAI?API的詳細步驟
在?JavaScript?中調(diào)用?OpenAI?API?也非常簡單,下面我將結(jié)合具體代碼示例以及使用場景,詳細講解如何使用?JavaScript?調(diào)用?OpenAI?API,需要的朋友可以參考下2025-04-04
Javascript Function對象擴展之延時執(zhí)行函數(shù)
這篇文章主要介紹 在js里面怎么延時執(zhí)行一個函數(shù)?2010-07-07
用javascript連接access數(shù)據(jù)庫的方法
用javascript連接access數(shù)據(jù)庫的方法...2006-11-11
第九篇Bootstrap導(dǎo)航菜單創(chuàng)建步驟詳解
這篇文章主要介紹了Bootstrap導(dǎo)航菜單創(chuàng)建步驟詳解的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06