JS實現(xiàn)登錄頁密碼的顯示和隱藏功能
更新時間：2017年12月06日 14:27:06 作者：w冰淇淋
在登錄頁經常會用到通過點擊文本框的類似小眼睛圖片來實現(xiàn)隱藏顯示密碼的功能。下面給大家介紹基于JS實現(xiàn)登錄頁密碼的顯示和隱藏功能，需要的朋友參考下吧
在登錄頁經常會用到通過點擊文本框的類似小眼睛圖片來實現(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框內的切換圖片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>
總結
以上所述是小編給大家介紹的JS實現(xiàn)登錄頁密碼的顯示和隱藏，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了JS生成隨機字符串的方法,需要的朋友可以參考下2014-06-06
這篇文章給大家描述的是如何一步步簡單的實現(xiàn)Javascript 字符串模板，對于初學javascript的菜鳥們來說應該是篇不錯的文章，希望對大家能夠有所幫助。2016-02-02
圖片自動或手動切換，想必會在很多地方有見過吧，本文將為大家介紹的是使用原生javascript實現(xiàn)的焦點圖切換，感興趣的朋友可以參考下2013-09-09
下面小編就為大家?guī)硪黄狫avaScript String 對象常用方法總結。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-04
這篇文章主要介紹JavaScript閉包知識，包括閉包的基本概念，閉包的用途等相關知識，介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-06-06
JavaScript通過this變量快速找出用戶選中radio按鈕的方法
這篇文章主要介紹了JavaScript通過this變量快速找出用戶選中radio按鈕的方法,涉及javascript中this變量的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了如何利用Cesium繪制柵欄效果的示例代碼，文中的示例代碼講解詳細，對我們學習或工作有一定的幫助，需要的可以參考一下2022-06-06
ES6使用export和import實現(xiàn)模塊化的方法
這篇文章主要介紹了ES6使用export和import實現(xiàn)模塊化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
JavaScript 一行代碼,輕松搞定浮動快捷留言-V2升級版
前天熬了大半宿發(fā)了一篇[一行代碼輕松搞定快捷留言功能]，同時發(fā)布了V1.0beta版的快捷留言功能和源代碼，之所以是beta版，就是當時感覺雖然基本功能有了，但是還不夠完善，特性也不一定合理2010-04-04
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單日歷特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01