很多密码框都有个眼睛标记，点击能显示密码。原理就是点击切换password为text等显示

下面上代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style type="text/css">

             .pass{

                 width:200px;

                 height: 20px;

             }

         </style>

         <script>

             window.onload=function(){

                 var btn=document.getElementById("btn");

                 var pass=document.getElementById("pass")

                 btn.onmousedown=function(){

                     pass.type="number"

                 };

                 btn.onmouseup=btn.onmouseout=function(){

                     pass.type="password"

                 }

             }

         </script>

     </head>

     <body>

         <input type="password" name="" id="pass" value="123456" class="pass"/>

         <input type="button" name="" id="btn" value="点击显示" />

     </body>

 </html>

js点击 密码输入框密码显示隐藏的更多相关文章

  1. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

  2. js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么

    js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...

  3. 旁门左道通过JS与纯CSS实现显示隐藏层

    想必大家在开发前端页面时,肯定少不了显示隐藏层这一技术点.那么我简单粗暴地总结了以下两个小demo. 要实现该截图的功能:鼠标移动到我的好友这个选项卡时,灰色的隐藏层就会出现.

  4. js点击按钮div显示，点击div或者body和按钮，div隐藏

    var box = document.getElementById("box"); var btn = document.getElementById("btn" ...

  5. Android：密码显示隐藏

    效果: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= ...

  6. JavaScript-点击任意点显示隐藏

    //开/关 var only = document.getElementById('only'); var centerBox = document.getElementById('centerBox ...

  7. vue+element-ui实现显示隐藏密码

    <template> <el-form :model="cuser_info" label-width="115px" label-posit ...

  8. 基于JavaScript实现表单密码的隐藏和显示出来

    转载:http://www.jb51.net/article/80326.htm 主要代码:<input type="password" name="pass&qu ...

  9. angular学习笔记(八)-控制视图显示隐藏

    本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐 ...

随机推荐

  1. 页面接口防刷 解决思路一nginx

    线上环境 很多接口 如果不做缓存 可能导致有人拿到url  每秒几万次的访问后台程序,导致系统down机. 此处, nginx可以加一层缓存. expires起到控制页面缓存的作用,合理的配置expi ...

  2. Java时间转换类实现

    Java时间类型非常的差,首先版本问题,本人使用java在Android平台开发.很多Data类的方法已经不提倡使用,一个时间,居然要使用Calendar.DateFormat等类共同编码,非常麻烦. ...

  3. OcciWrapper使用指南(高性能Oracle访问组件)

    occiwrapper使用指南 occiwrapper是一个开源的.跨平台的Oracle访问组件, 方便C++开发者们灵活地操作oracle数据库.为了方便使用,组件中的接口形式参考的POCO库的使用 ...

  4. iOS开发 落地消息多的处理办法（仅供参考）

    1.首先要知道一点,你的消息储存是用数据库储存的! 看了一下微信和qq的消息处理,一般情况下第三方(亲加,容云,环信都会有本地的数据库)处理过的! 但是我发现,最近一个需求要求开发@"消息已 ...

  5. android_自定义布局

    1.需要实现view类 2.如果需要实现自定义属性则: 1.定义资源文件attrs---->values 2. <?xml version="1.0" encoding ...

  6. Http、Socket的区别

    转自:http://jingyan.baidu.com/article/08b6a591e07ecc14a80922f1.html 网络由下往上分为 物理层.数据链路层.网络层.传输层.会话层.表示层 ...

  7. JAVA自动生成正则表达式工具类

    经过很久的努力,终于完成了JAVA自动生成正则表达式工具类.还记得之前需要正则,老是从网上找吗?找了想修改也不会修改.现在不用再为此烦恼了,使用此生成类轻松搞定所有正则表达式.赶快在同事面前炫一下吧. ...

  8. 安装Rational Rose启动报错：无法启动此程序，由于计算机中丢失 suite objects.dll。

    执行Rational Rose的时候假设出现这种错误,先检查环境变量有没有common的地址,假设没有直接配上就OK:配置例如以下:D:\Program Files\Rational\Common; ...

  9. [置顶] mmog游戏开发之业务篇

    这周不是很忙,因为我们的游戏开发了近一年,由于公司的业务调整,在游戏开第二服的时候,老板果断的把项目停到了. 感觉超级的不爽啊.因为这个游戏项目像我的孩子一样和我一样成长,里边的大概的业务逻辑都是偶实 ...

  10. Offer是否具有法律效力？

    版权声明:原创作品,同意转载,转载时请务必以超链接形式标明文章原始出版.作者信息和本声明.否则将追究法律责任.本文地址: http://blog.csdn.net/jobchanceleo/archi ...