很多密码框都有个眼睛标记，点击能显示密码。原理就是点击切换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. 用java面向对象的思想实现的汉诺塔问题

    package hanoi.com; public class Disc { private String name; private int level; public Disc(){ name = ...

  2. java程序员菜鸟进阶（十五）linux基础入门（三）linux用户和组管理

    我们大家都知道,要登录linux操作系统,我们必须要有一个用户名和密码.每一个用户都由一个惟一的身份来标识,这个标识叫做用户ID.系统中的每一个用户也至少需要属于一个"用户分组". ...

  3. Oracle--SQL Developer创建连接及使用

    安装好Oracle之后,有几种方式可以来管理Oracle中的数据库,首先就是登陆网页版的界面:https://localhost:1158/em,这种方式管理的东西太多,使用起来有点不方便,第二种方式 ...

  4. C++中模板使用详解

    转自:http://www.360doc.com/content/09/0403/17/799_3011262.shtml 1. 模板的概念. 我们已经学过重载(Overloading),对重载函数而 ...

  5. c++虚表的使用 通过虚表调用虚函数的演示代码

    //演示一下c++如何找到虚表地址vptr以及如何通过虚表调用虚函数 //zhangpeng@myhexin.com 20130811 #include <iostream> using ...

  6. 10465 - Homer Simpson 贪心

                                            Homer Simpson Time Limit: 3 seconds Memory Limit: 32 MB Home ...

  7. case when then 与 count联合使用

    我们都知道SQL中适用case when then来转化数据库中的信息 比如  select (case sex when 0 then '男' else '女' end) AS sex  from ...

  8. 关于FPGA异步时钟采样--结绳法的点点滴滴

    一.典型方法 典型方法即双锁存器法,第一个锁存器可能出现亚稳态,但是第二个锁存器出现亚稳态的几率已经降到非常小,双锁存器虽然不能完全根除亚稳态的出现(事实上所有电路都无法根除,只能尽可能降低亚稳态的出 ...

  9. Java类加载及实例化的调用顺序

    标题起得略拗口,大概意思就是说在一个Java类中,域和构造方法的调用顺序. 1. 没有继承的情况 单独一个类的场景下,初始化顺序为依次为 静态数据,继承的基类的构造函数,成员变量,被调用的构造函数. ...

  10. Unity3D 之UGUI 文本框和编辑框

    这里来讲解一下unity3D自带的UI功能,自带的UI也叫UGUI功能非常的强大,比起NGUI,更加的灵活,让用户能够更加容易的去使用. 首先创建一个文本Text 然后是文本相对应的属性 这里的属性比 ...