js 輸入框密文轉明文
阿新 • • 發佈:2018-12-22
在我們電腦開機輸入密碼或者一些網站的登入頁面中,在輸入框輸入密碼,會顯示******,防止旁人會看到密碼。而當自己密碼太長,輸入到一半時自己輸亂了,想要知道自己輸入了什麼時,可以通過點選一下旁邊的按鈕來檢視。
當滑鼠按下時所輸入密碼為明文,鬆開就恢復******
首先我們在html中寫入一個輸入框和一個按鈕,分別給它們一個id來連線js。
<body>
<input type="password" name="" id="pwd"/>
<input type="button" id="btn" value="點選顯示"/>
</body>
可以通過event事件中的onmousedown、onmouseup來觸發滑鼠按下和鬆開的事件onmousedown 某個滑鼠按鍵被按下
onmouseup 某個滑鼠按鍵被鬆開
當type = "password"時輸入的內容為******;
當type = "text"時輸入的內容為明文。
下面是js的程式碼:
<script type="text/javascript"> //獲得按鈕控制元件 var btnin = document.getElementById("btn"); //滑鼠按下時觸發的事件 btnin.onmousedown = function(){ //獲得輸入框控制元件 pwdin = document.getElementById("pwd"); //改變輸入框內容 pwdin.type = "text"; } //滑鼠鬆開時觸發的事件 btnin.onmouseup = function(){ //改變輸入框內容 pwdin.type = "password"; } </script>