【JS】JS實現登錄頁密碼的顯示和隱藏

在登錄頁經常會用到通過點擊文本框的類似小眼睛圖片來實現隱藏顯示密碼的功能，其實實現原理很簡單，通過點擊事件來改變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 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>