jQuery显示隐藏密码插件jquery.toggle-password演示

最新推荐文章于 2021-06-24 13:10:07 发布

最骚的就是你

最新推荐文章于 2021-06-24 13:10:07 发布

阅读量1.7k

点赞数

分类专栏： web前端学习文章标签： jquery 密码插件

本文链接：https://blog.csdn.net/libin_1/article/details/50733377

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <title>jQuery显示隐藏密码插件jquery.toggle-password演示_dowebok</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                font: 14px Arial, sans-serif;
                color: red;
            }

            input {
                font-family: Arial, sans-serif;
            }

            .login {
                width: 270px;
                margin: 0 auto;
                padding: 10px 70px;
                background-color: pink;
                border: 1px solid green;
                border-radius: 32px;
            }

            .login ul {
                list-style-type: none;
            }

            .login li {
                padding: 10px 0;
                overflow: hidden;
            }

            .login .li3,
            .login .li5 {
                text-align: right;
                font-size: 12px;
                border: 1px solid red;
                padding: 10px;
            }

            .login .li3 input {
                /*width: 13px;
                height: 13px;*/
                margin: 0 3px 0 20px;
                vertical-align: middle;
                border: 11px solid blue;
            }

            .login .submit {
                display: block;
                width: 100%;
                padding: 16px 0;
                border: 1px solid red;
                color: green;
                background-color: greenyellow;
                cursor: pointer;
                border-radius: 10px;
            }

            #email,
            #password {
                width: 214px;
                padding: 5px;
                border: 1px solid red;
            }

            .forgot {
                color: blue;
            }
        </style>
        <script src="js/jquery-1.9.0.min.js"></script>
        <script src="js/jquery.toggle-password.js"></script>
        <script>
            $(function() {
                $('#password').togglePassword({
                    el: '#togglePassword'
                });
            });
        </script>
    </head>

    <body>
        <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery显示隐藏密码插件jquery.toggle-password演示</h1>

        <div class="login">
            <ul>
                <li><span><label for="email">邮箱：</label></span>
                    <input id="email" type="text">
                </li>
                <li><span><label for="password">密码：</label></span>
                    <input id="password" type="password">
                </li>
                <li class="li3">
                    <input type="checkbox" id="remember">
                    <label for="remember">记住密码</label>
                    <input type="checkbox" id="togglePassword">
                    <label for="togglePassword">显示密码</label>
                </li>
                <li class="li4">
                    <input class="submit" type="submit" value="登录">
                </li>
                <li class="li5"><a class="forgot" href="javascript:">忘记密码？</a></li>
            </ul>
        </div>

    </body>

</html>

jquery.toggle-password.js：

(function ( $ ) {
    $.fn.togglePassword = function( options ) {
        var s = $.extend( $.fn.togglePassword.defaults, options ),
        input = $( this );

        $( s.el ).bind( s.ev, function() {
            "password" == $( input ).attr( "type" ) ?
                $( input ).attr( "type", "text" ) :
                $( input ).attr( "type", "password" );
        });
    };

    $.fn.togglePassword.defaults = {
        ev: "click"
    };
}( jQuery ));

最骚的就是你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery显示隐藏密码插件jquery.toggle-password演示

<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <title>jQuery显示隐藏密码插件jquery.toggle-password演示_dowebok</title> <style> * { margin
复制链接

扫一扫