js 实现密码框的查看和隐藏
大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。--来自奔跑的panda部落，panda每天与您一起进步
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 li {
8 list-style: none;
9 }
10
11 .wrap input {
12
13 border: none;
14 border-bottom: 1px solid #999999;
15 outline: none;
16
17 }
18 .wrap li{
19 position: relative;
20 width: 200px;
21 }
22 .img{
23 width: 20px;
24 height: 20px;
25 position: absolute;
26 right: 10px;
27 top: 0;
28 }
29 </style>
30 </head>
31 <body>
32
33 <div class="wrap">
34 <li>
35 <input type="password" name="" id="psd" value="" placeholder="密码框" />
36 <div class="img">
37 <img src="img/hide.png" style="width: 100%;" id="img">
38 </div>
39 </li>
40 </div>
41 <script type="text/javascript">
42 var pwd = document.getElementById('psd');
43 var img = document.getElementById('img');
44 var flag = 0;
45 img.onclick = function(){
46 if(flag == 0){
47 pwd.type = 'text'
48 img.src = 'img/show.png'
49 flag = 1
50 }else{
51 pwd.type = 'password'
52 img.src = 'img/hide.png'
53 flag = 0;
54
55 }
56 }
57
58 </script>
59 </body>
60 </html>
js 实现密码框的查看和隐藏的更多相关文章
- js关于密码框强弱度的提示
三种密码强度的正则表达式: 较弱:全是数字或全是字母 6-16个字符:/^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/; 中级:数字.26个英文字母 6-16个字符: /^[A-Za- ...
- Jquery 实现密码框的显示与隐藏【转载自http://blog.csdn.net/fengzhishangsky/article/details/11809069】
<html> <head> <script type="text/JavaScript" src="jQuery-1.5.1.min.j ...
- JS控制文本框中的密码显示/隐藏功能
<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...
- spring mvc：常用标签库(文本框，密码框，文本域，复选框，单选按钮，下拉框隐藏于，上传文件等)
在jsp页面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form&q ...
- jquery 实现 <imput>标签 密码框显示/隐藏密码功能
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
- 表单form的属性，单行文本框、密码框、单选多选按钮
基础表单结构: <body> <h1> <hr /> <form action="" name="myFrom" en ...
- WPF文本框密码框添加水印效果
WPF文本框密码框添加水印效果 来源: 阅读:559 时间:2014-12-31 分享: 0 按照惯例,先看下效果 文本框水印 文本框水印相对简单,不需要重写模板,仅仅需要一个VisualBrush ...
- [Asp.net]说说密码框和只读框
作者:Wolfy出处:http://www.cnblogs.com/wolf-sun/ 引言 最近负责了一个公司的小项目,从前台到后代,都是自己搞的,为一个客户弄一个信息管理的小系统,虽然对界面什么的 ...
- WPF 之 文本框及密码框添加水印效果
1.文本框添加水印效果 文本框水印相对简单,不需要重写模板,仅仅需要一个 VisualBrush 和触发器验证一下Text是否为空即可. <TextBox Name="txtSerac ...
- jquery实现密码框显示提示文字
jquery实现密码框提示文字的功能. 代码: <html> <head> 3 <title>登录-jquery实现密码框显示文字-www.jbxue. ...
随机推荐
- TaskPool 和 Worker 的对比
作用: TaskPool(任务池)和 Worker 都为应用程序提供多线程运行环境,用于处理耗时的计算任务或其他密集型任务,避免阻塞主线程,提高系统性能. 实现特点对比: 内存模型:TaskPoo ...
- pid循迹小车的实现，arduino
帮我写一个Arduino循迹小车的程序,小车前面有并列8个红外发射接收传感器,每个红外发射接收传感器为1cm宽,地面循迹的线是大约2cm宽黑色的线,地面其他位置是白色的,要求循迹小车运行的速度快,使用 ...
- OpenSergo & CloudWeGo 共同保障微服务运行时流量稳定性
简介: 流控降级与容错是微服务流量治理中的重要的一环,同时 MSE 还提供更广范围.更多场景的微服务治理能力,包括全链路灰度.无损上下线.微服务数据库治理.日志治理等一系列的微服务治理能力. 作者:宿 ...
- 从 2018 年 Nacos 开源说起
2018 年夏天 国内微服务开源 领域,迎来了一位新成员.此后,在构建微服务注册中心和配置中心的过程中,国内开发者多了一个可信赖的选项. Nacos 是阿里巴巴开源的一个更易于构建云原生应用的动态服务 ...
- 利器解读！Linux 内核调测中最最让开发者头疼的 bug 有解了｜龙蜥技术
简介:通过在Anolis 5.10 内核中增强 kfence 的功能,实现了一个线上的.精准的.可定制的内存调试解决方案. 编者按:一直持续存在内核内存调测领域两大行业难题: "内存被改& ...
- 「直播回顾」Mars应用与最佳实践
简介: 本文首先对Mars的概念.功能.优势进行了介绍,随后,对Mars几个典型的应用场景进行介绍,并通过两个Demo展示了在使用Mars后数据科学性能的提升,最后总结了Mars的最佳实践,让使用Ma ...
- Fluid给数据弹性一双隐形的翅膀 （1） -- 自定义弹性伸缩
简介: 弹性伸缩作为Kubernetes的核心能力之一,但它一直是围绕这无状态的应用负载展开.而Fluid提供了分布式缓存的弹性伸缩能力,可以灵活扩充和收缩数据缓存. 它基于Runtime提供了缓存空 ...
- PolarDB for PostgreSQL 开源路线图
简介:作者:蔡乐 本文主要分享一下Polar DB for PG的开源路线图,虽然路线图已经拟定,但是作为开源产品,所有参与者都能提出修改意见,包括架构核心特性的技术以及周边生态和工具等,希望大家能 ...
- 如何快速开发 Serverless Devs Package ?
简介:目前,开发者开发 Serverless Package 的流程相对来说是比较简单的.因为在 Serverless Devs 开发者工具中,已经提供了相对完整的脚手架能力,一文了解详情~ 作 ...
- 基于FPGA的音乐蜂鸣器设计
蜂鸣器是一种一体化结构的电子讯响器,采用直流电压供电,广泛应用于计算机.打印机.复印机.报警器.电子玩具.汽车电子设备.电话机.定时器等电子产品中作发声器件. 图1 :蜂鸣器实物图 蜂鸣器主要分为压电 ...