常见的密码输入框当输入字符后会被替换成‘*’，而且旁边会有个小眼睛可以查看原本的字符，虽然input标签有这个功能，但这只是自己正在看正则表达式的时候突然想到的，就当做个练习，自己手动实现下：

 <body>

     <input type="text" id="psw"><button id="show">show</button>

 <script>

     var psw = document.getElementById('psw'),

         show = document.getElementById('show'),

         array = [],

         pattern = /\w/g;

     psw.onkeypress = function(e){

         array.push(String.fromCharCode(e.charCode)); //将每个按键的字符存入数组

         this.value = this.value.replace(pattern,'*');//替换掉原始字符

     }

     psw.onkeydown = function(e){

         if(e.keyCode == 8){ //当按下删除建的时候数组也要从尾部开始删除项

             array.pop();

             console.log(array)

         }

     }

     show.onmousedown = function(){ //模拟小眼睛，按下的时候显示原始字符

         console.log(2)

         psw.value = array.join('');

     }

     show.onmouseup = function() {//松开时显示‘*’

         console.log(3)

         psw.value = psw.value.replace(pattern,'*');

     }

     psw.onblur = function() {

         this.value = this.value.replace(pattern, '*');

     }

 </script>

 </body>

JavaScript实现一个简单的密码输入功能的更多相关文章

  1. CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能

    CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能 效果图 这是红宝书里的例子,在这个例子中,下述功能全部登场,因此这个例子可作为使用Compute Shader的典型 ...

  2. 完成一段简单的Python程序，用于实现一个简单的加减乘除计算器功能

    #!/bin/usr/env python#coding=utf-8'''完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能'''try: a=int(raw_input(" ...

  3. javascript编写一个简单的编译器(理解抽象语法树AST)

    javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...

  4. 基于PHP实现一个简单的在线聊天功能（轮询ajax ）

    基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...

  5. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  6. javascript 异或运算符实现简单的密码加密功能

    写在前面的 当我们需要在数据库中存储用户的密码时,当然是不能明文存储的. 我们就是介绍一下用^运算符来实现简单的密码加密以及解密功能 上代码 首先,回顾一下基础知识. String.fromCharc ...

  7. C#-用Winform制作一个简单的密码管理工具

    为什么要做? 首先是为了练习一下c#. 想必大家都有过记不起某个平台的账号密码的经历,那种感受着实令人抓狂.那这么多账号密码根本记不住!我之前用python写过一个超级简单(连账号信息都写在代码里那种 ...

  8. 用JavaScript实现一个简单的树结构

    数据源用数组混json结构,实现了基本的功能.效率一般,跟 dhtree 梅花雪树对比了下,都差不多. (ps感觉比dhtree快点,跟梅花雪树差不多,个人测试) 这个实现树的原理是根据json,不断 ...

  9. 使用JavaScript实现一个简单的编译器

    在前端开发中也会或多或少接触到一些与编译相关的内容,常见的有 将ES6.7代码编译成ES5的代码 将SCSS.LESS代码转换成浏览器支持的CSS代码 通过uglifyjs.uglifycss等工具压 ...

随机推荐

  1. Facebook的实时流处理技术——Scuba是Facebook的一个非常快速、分布式的内存数据库，用于实时分析和查询

    Scuba,Facebook的一个非常快速.分布式的内存数据库,用于实时分析和查询.是Facebook的回归分析代码.错误报告监控.广告收入监控和性能调试的背后主力. Facebook的实时流处理技术 ...

  2. codeforces 659D D. Bicycle Race(水题)

    题目链接: D. Bicycle Race time limit per test 1 second memory limit per test 256 megabytes input standar ...

  3. 一个坑：sql中问号(?)传参和 美元符号传参(${})的区别

    ? 可能会把参数加一对引号,不忽略前后空格? ${}是字符串拼接,好处是字符串前后的空格会被忽略... 但拼接有可能导致SQL注入

  4. linux命令学习笔记(25)：linux文件属性详解

    Linux 文件或目录的属性主要包括:文件或目录的节点.种类.权限模式.链接数量.所归属的用户和用户组. 最近访问或修改的时间等内容.具体情况如下: 命令: ls -lih 输出: [root@loc ...

  5. ActivityMq的使用（小例子）

    一.ActivityMq的介绍: 1.什么是消息中间件?与传统的传输通讯有什么区别? 异步,无需等待,消息存放在队列里面. 2.为什么要使用消息中间件? 消息中间件可以解决高并发. 两种通讯方式:01 ...

  6. MySQL三个列组成唯一值查询_开源中国问题练习_20161026

    问题地址:https://www.oschina.net/question/2923955_2202674 按 service_collect_day分类以后,按 app_id,node_id,ser ...

  7. BZOJ_2802_[Poi2012]Warehouse Store_堆+贪心

    BZOJ_2802_[Poi2012]Warehouse Store_堆+贪心 Description 有一家专卖一种商品的店,考虑连续的n天. 第i天上午会进货Ai件商品,中午的时候会有顾客需要购买 ...

  8. poj1149PIGS——网络最大流

    题目:http://poj.org/problem?id=1149 不把猪圈当做点,而把顾客当作点,把猪当作边权(流量): 因为猪圈中的猪可流动,所以共用一个猪圈的人互相连边: 注意应该连成链的形式, ...

  9. LINUX socket网络编程

    1. 网络中进程之间如何通信 进 程通信的概念最初来源于单机系统.由于每个进程都在自己的地址范围内运行,为保证两个相互通信的进 程之间既互不干扰又协调一致工作,操作系统为进程通信提供了相应设施,如 U ...

  10. WPF学习系列之五（WPF控件）

    控件:    1.内容控件------这些控件能够包含嵌套的元素,为它们提供几乎无限的显示能力.内容控件包括Lable,Button 以及ToolTip类. 内容控件是更特殊的控件类型,它们可以包含( ...