很多密码框都有个眼睛标记，点击能显示密码。原理就是点击切换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. 说一说window.parent

    <iframe>标签是很常用的,嵌在页面之中,可以做独立的加载和刷新.比如说,页面分左右或者上下结构,一般左侧和上侧是导航部分,右侧和下侧是目标页面的展示部分,只需要设置导航链接的targ ...

  2. PowerDesigner建数据库模型增加自定义扩展属性

    PowerDesigner自7.x新增加一个特性,就是允许用户通过扩展模型的方式扩展模型的属性,但到底怎用一直搞不清楚．今天和同事商量准备直接在程序的Metadata信息实现上直接使用pdm时,我们需 ...

  3. innobackupex自动备份脚本（增量备份，自动压缩）

    #!/bin/bash #日期转为天数 function date2days { echo "$*" | awk '{ z=-$)/); y=$+-z; m=$+*z-; j=*m ...

  4. ubuntu14.04 64bit 安装 &amp;&amp; 破解quartus13.0 记录

    安装文件:Quartus-13.0.0.156-linux.iso             Quartus-13.0.0.156-devices-1.iso 1.挂载:sudo mount -o lo ...

  5. 从源码角度深入分析ant

    Ant的基本概念 首先是ant的基本概念:Project,Target,Tasks,Properties,Paths 1.Project <project> build.xml文件最顶层的 ...

  6. <BEA-141281> <unable to get file lock, will retry ...> --reference

    I ran into this error the first time I restarted Weblogic on one of my installs, the only reference ...

  7. Nginx【第一篇】安装

    一.简介 Nginx("engine x")是一款是由俄罗斯的程序设计师 Igor Sysoev 所开发高性能的 Web 和 反向代理 服务器,也是一个 IMAP/POP3/SMT ...

  8. TCP/IP协议原理与应用笔记15：网络连接设备

    1. 网络连接设备: (1)转发器 Repeater/ 集线器 Hub (2)网桥 Bridge / 交换机 Switch (3)路由器 Router (4)网关 Gateway 2. 从通信角度看待 ...

  9. EasilyUI的一个简单的拖拽功能

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs&quo ...

  10. Mac系统Safari浏览器启动无图模式

    有的时候我们用热点上网,图片的出现会消耗大量的流量,这时候就需要启动无图模式不加载图片. 步骤:启动Safari浏览器->偏好设置->高级->勾选“在菜单栏中显示“开发”菜单”-&g ...