zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    【Android】HAL分析
    【qt】QT 的信号与槽机制
    【驱动】DM9000A网卡驱动框架源码分析
    【驱动】LCD驱动(FrameBuffer)分析
    告别我的OI生涯
    诸神的黄昏——北林退役帖合集
    cf592d
    北京林业大学就读体验
    hdu 5442 (ACM-ICPC2015长春网络赛F题)
    JAVA入门[4]-IntelliJ IDEA配置Tomcat
  • 原文地址:https://www.cnblogs.com/cjw-ryh/p/7676992.html
Copyright © 2011-2022 走看看