JQuery实现密码的显示与隐藏

最新推荐文章于 2025-05-19 09:05:31 发布

原创最新推荐文章于 2025-05-19 09:05:31 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #密码的显示与隐藏

Web前端专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个简单的网页应用，通过使用jQuery实现鼠标悬停时密码输入框的内容显示为明文的功能。该应用利用HTML与JavaScript结合，当鼠标移入指定区域时，密码框类型由'password'变为'text'，从而实现密码的明文显示；当鼠标移出时，又恢复为'password'状态。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>密码的来回显示</title>
    <script type="application/javascript"
            src="../frameworks/jquery-2.1.4/jquery-2.1.4.js"></script>
    <script type="application/javascript">
        $(function(){
            $("#showPass").on("mouseover",function(){
                $("#pass").prop("type","text");
            });
            $("#showPass").on("mouseout",function(){
                $("#pass").prop("type","password");
            });
        });

    </script>
</head>
<body>
<form action="#">
    <input id="pass" type="password" name="password">
    <span id="showPass">显示密码</span>
</form>
</body>
</html>