js、jquery分别实现点击密码输入框密码显示和隐藏

来源：互联网发布：人工智能百度网盘编辑：程序博客网时间：2024/05/24 05:38

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

主要知识点：

onmousedown：鼠标按下时事件

示例：document.getElementById("btn").onmousedown=function(){};

onmouseup：鼠标按键被松开时事件

示例：document.getElementById("btn").onmouseup=function(){};

1.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta charset="utf-8">        <title></title>        <style type="text/css">            .pass{                width:200px;                height: 20px;            }        </style>    </head>    <body>        <input type="password" name="" id="pass" value="123456" class="pass"/>        <input type="button" name="" id="btn" value="点击显示" />    </body></html>

2.方法一：js代码实现

<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>

方法二：jquery代码实现

    $(function(){    $("#btn").mousedown(function(){    $("#pass").attr("type", "text");    });    $("#btn").mouseup(function(){    $("#pass").attr("type", "password");    });    });

注意：jquery有一个缺点，那就是IE浏览器不支持修改type，所以建议用js实现。

阅读全文

0 0