很多密码框都有个眼睛标记，点击能显示密码。原理就是点击切换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. os4开始CLLocationManager类中不支持locationServicesEnabled属性了

    locationServicesEnabled改为类方法 //判断定位服务是否开启 if ([CLLocationManager locationServicesEnabled]) { }

  2. android FakeWindow的小应用大用途

    android FakeWindow的小应用大用途 在windowmanager里面有一个FakeWindow,细致一看也就是一个透明的应用覆盖到屏幕的最前端,这样有什么优点呢?首先我们还是从应用的需 ...

  3. ThinkPHP3.1快速入门（2）数据CURD

    上一篇中,我们了解了ThinkPHP的基础部分,以及如何创建一个控制器和模板,并知道了M方法的用法,本篇将会讲解下数据的CURD操作,探索下更多的数据操作. CURD CURD是一个数据库技术中的缩写 ...

  4. ThinkPHP3.1 常量参考

    预定义常量 常量 说明 URL_COMMON=0 普通模式 URL URL_PATHINFO=1 PATHINFO URL URL_REWRITE=2 REWRITE URL URL_COMPAT=3 ...

  5. uva 11270 - Tiling Dominoes(插头dp)

    题目链接:uva 11270 - Tiling Dominoes 题目大意:用1∗2木块将给出的n∗m大小的矩阵填满的方法总数. 解题思路:插头dp的裸题,dp[i][s]表示第i块位置.而且该位置相 ...

  6. Android 颜色渲染(六) RadialGradient 环形渲染

    Android 颜色处理(六) RadialGradient 环形渲染 public RadialGradient(float x, float y, float radius, int[] colo ...

  7. p

    都不知道简历去投什么地方.游戏都卖不出去,又做不出口碑好的.这些人是心存侥幸还是心存坚持. 感觉自己搞不清楚就很难再出发.

  8. 转：FORM:客制化Form的菜单栏和右鍵菜單

    Oracle EBS还允许客制化Form的菜单栏. 用户最多可以定义45个form-level的trigger,名称必须为SPECIALn, 其中SPECIAL1 to SPECIAL15属于Tool ...

  9. Linux 普通用户su命令切换控制

    1.编辑配置文件/etc/pam.d/su .将下面配置文件"#“去掉: # auth           required        pam_wheel.so use_uid 改成 a ...

  10. VBA控件ListBox的BoundColumn和TextColumn用法，Value和Text的用法

    在使用Excel编写VBA程序时,用到ListBox,然后研究了下它的所有属性.其实这个控件功能很不好用,太老了,最重要的是还不支持鼠标滚轮,很不好操作,但是考虑到兼容性,还是使用它. 其实读取.写入 ...