很多密码框都有个眼睛标记，点击能显示密码。原理就是点击切换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. 51nod1009(1的数目)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1009 题意:中文题诶- 思路:分别考虑各个数位上出现1的次数 ...

  2. WordPress公布新文章Email通知注冊用户

    非常多WordPress博客都开放了用户注冊的功能,用户能够參与到博客的内容建设其中来.也就是一个博客由多个用户来写.如今有这种需求,怎样实如今某一个用户发表文章后.其它用户都能收到Email通知?以 ...

  3. ThinkPad New X1 Carbon中关闭任务栏上的触摸键盘

    1. 执行services.msc 2. 选择Touch Keyboard and Handwriting Panel 服务. 3. 将其停止执行. 并disable.

  4. matlab两种不同模式的并行运算

    1.distributed job      distributed job是一种比較简单的并行任务.假定用户须要完毕一组作业.各个计算作业之间是独立的.并且相互之间不须要进行数据通信.这意味着各个作 ...

  5. jfinal-QuartzPlugin后台任务调度

    配置方法: 1. 在jfinal的Start.java中插件位置配置QuartzPlugin /** * 配置插件 */ public void configPlugin(Plugins me) { ...

  6. L2TP

    点击查看详情>>   我的贡献 |退出 L2TP 编辑词条 L2TP是一种工业标准的Internet隧道协议,功能大致和PPTP协议类似,比如同样可以对网络数据流进行加密.不过也有不同之处 ...

  7. MyEclipse Hibernate Reverse Engineering 找不到项目错误

    解决办法:在项目下找到.project文件,在最后的natures标签加入下面红色的一行代码. <natures>        <nature>com.genuitec.ec ...

  8. Android_Broadcast

    /** * Broadcast(广播):是一种广泛运用的在应用程序之间传输信息的机制 * * BroadcastReceiver(广播接收者) * 是对发送出来的广播进行过滤接收并响应的一类组件,它就 ...

  9. KALI 2.0优化

    1.首选项没有主菜单,系统管理 apt-get install alacarte 2.APT源 #官方源deb http://http.kali.org/kali kali main non-free ...

  10. bash调试执行

    bash -x 调试执行 bash -n 测试语法