在登錄頁經常會用到通過點擊文本框的類似小眼睛圖片來實現隱藏顯示密碼的功能，其實實現原理很簡單，通過點擊事件來改變input的type類型，具體過程看代碼：
在沒給大家分享實現代碼之前，先給大家展示下效果圖：
<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 >
<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實現登錄頁密碼的顯示和隱藏，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
