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>
  • 相关阅读:
    关系数据模型和对象数据模型之间的对应关系
    object中的方法
    重写与重载
    java中的多态总结
    int是java.lang包中可用的类的名称
    abstract关键字的说法
    7迭代器
    6python *args **kwargs
    1特征工程
    1html
  • 原文地址:https://www.cnblogs.com/cjw-ryh/p/7676992.html
Copyright © 2011-2022 走看看