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

最新推荐文章于 2022-07-03 15:31:11 发布

陈艾语

最新推荐文章于 2022-07-03 15:31:11 发布

阅读量1.7w

点赞数 6

分类专栏： web 文章标签：密码框

web 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用纯JS和jQuery实现密码框与文本框之间的切换显示，适用于网站登录或注册页面，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

主要知识点：

onmousedown：鼠标按下时事件

示例：document.getElementById("btn").οnmοusedοwn=function(){};

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

示例：document.getElementById("btn").οnmοuseup=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.οnlοad=function(){
        var btn=document.getElementById("btn");
        var pass=document.getElementById("pass")
        btn.οnmοusedοwn=function(){
            pass.type="number"
        };
        btn.οnmοuseup=btn.οnmοuseοut=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实现。