JavaScript实现一个简单的密码输入功能
Posted 法克大叔叔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript实现一个简单的密码输入功能相关的知识，希望对你有一定的参考价值。
常见的密码输入框当输入字符后会被替换成‘*’，而且旁边会有个小眼睛可以查看原本的字符，虽然input标签有这个功能，但这只是自己正在看正则表达式的时候突然想到的，就当做个练习，自己手动实现下：
1 <body> 2 <input type="text" id="psw"><button id="show">show</button> 3 <script> 4 var psw = document.getElementById(‘psw‘), 5 show = document.getElementById(‘show‘), 6 array = [], 7 pattern = /\w/g; 8 psw.onkeypress = function(e){ 9 array.push(String.fromCharCode(e.charCode)); //将每个按键的字符存入数组 10 this.value = this.value.replace(pattern,‘*‘);//替换掉原始字符 11 } 12 psw.onkeydown = function(e){ 13 if(e.keyCode == 8){ //当按下删除建的时候数组也要从尾部开始删除项 14 array.pop(); 15 console.log(array) 16 } 17 } 18 show.onmousedown = function(){ //模拟小眼睛，按下的时候显示原始字符 19 console.log(2) 20 psw.value = array.join(‘‘); 21 } 22 show.onmouseup = function() {//松开时显示‘*’ 23 console.log(3) 24 psw.value = psw.value.replace(pattern,‘*‘); 25 } 26 psw.onblur = function() { 27 this.value = this.value.replace(pattern, ‘*‘); 28 } 29 </script> 30 </body>
以上是关于JavaScript实现一个简单的密码输入功能的主要内容，如果未能解决你的问题，请参考以下文章