JavaScript实现一个简单的密码输入功能
常见的密码输入框当输入字符后会被替换成‘*’,而且旁边会有个小眼睛可以查看原本的字符,虽然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实现一个简单的密码输入功能的更多相关文章
- CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能
CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能 效果图 这是红宝书里的例子,在这个例子中,下述功能全部登场,因此这个例子可作为使用Compute Shader的典型 ...
- 完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能
#!/bin/usr/env python#coding=utf-8'''完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能'''try: a=int(raw_input(" ...
- javascript编写一个简单的编译器(理解抽象语法树AST)
javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...
- 基于PHP实现一个简单的在线聊天功能(轮询ajax )
基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址 ...
- javascript 异或运算符实现简单的密码加密功能
写在前面的 当我们需要在数据库中存储用户的密码时,当然是不能明文存储的. 我们就是介绍一下用^运算符来实现简单的密码加密以及解密功能 上代码 首先,回顾一下基础知识. String.fromCharc ...
- C#-用Winform制作一个简单的密码管理工具
为什么要做? 首先是为了练习一下c#. 想必大家都有过记不起某个平台的账号密码的经历,那种感受着实令人抓狂.那这么多账号密码根本记不住!我之前用python写过一个超级简单(连账号信息都写在代码里那种 ...
- 用JavaScript实现一个简单的树结构
数据源用数组混json结构,实现了基本的功能.效率一般,跟 dhtree 梅花雪树对比了下,都差不多. (ps感觉比dhtree快点,跟梅花雪树差不多,个人测试) 这个实现树的原理是根据json,不断 ...
- 使用JavaScript实现一个简单的编译器
在前端开发中也会或多或少接触到一些与编译相关的内容,常见的有 将ES6.7代码编译成ES5的代码 将SCSS.LESS代码转换成浏览器支持的CSS代码 通过uglifyjs.uglifycss等工具压 ...
随机推荐
- Java集合的有序无序问题和线程安全与否问题
首先,清楚有序和无序是什么意思: 集合的有序.无序是指插入元素时,保持插入的顺序性,也就是先插入的元素优先放入集合的前面部分. 而排序是指插入元素后,集合中的元素是否自动排序.(例如升序排序) 1.有 ...
- div靠右浮动案例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- js 时间格式处理插件 moment
官网: http://momentjs.cn/docs/#/plugins/ 各种API官网上都有详细的例子,这里就不做一一说明. 重点讲两个常用的: 一.获取当前日期 moment().format ...
- LINUX socket网络编程
1. 网络中进程之间如何通信 进 程通信的概念最初来源于单机系统.由于每个进程都在自己的地址范围内运行,为保证两个相互通信的进 程之间既互不干扰又协调一致工作,操作系统为进程通信提供了相应设施,如 U ...
- session.write类型引发的思考---Mina Session.write流程探索.doc--zhengli
基于Mina开发网络通信程序,在传感器数据接入领域应用的很广泛,今天我无意中发现一个问题,那就是我在前端session.write(msg)数据出去之后,却没有经过Filter的Encoder方法,同 ...
- java 基础知识学习 内存泄露(memory leak) VS 内存溢出(out of memory)以及内存管理
内存泄露(memory leak) VS 内存溢出(out of memory) 内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory ...
- jsonp实现数据跨域请求
1.我们知道,哪怕跨域js文件中的代码(当然指符合web脚本安全策略的),web页面也是可以无条件执行的. 远程服务器remoteserver.com根目录下有个remote.js文件代码如下: al ...
- ssh无密码登录设置失败的 解决办法
因为要安装hadoop所以需要设置ssh无密码登录,SSH的安装就不在这里介绍了: 我的系统是ubuntu15.10,开始按照网上很多的步骤去配置,最后发现登录时还要密码,登录多次也是这样的情况 最后 ...
- Tomcat访问程序外的上传文件
自己在编写程序时,把图片上传到程序根目录下,但是页面使用<img> 没有显示.但是,当我刷新项目下文件夹后,页面刷新可以显示. 我通过网上查询,当在Tomcat下的server.xml配置 ...
- MySQL之创、增、删、改、查
MySQL Select version(); 当前服务器版本 Select database(); 查看当前工作数据库 Show databases; 显示所有数据库 Select user ...