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


<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <title>jQuery显示隐藏密码插件jquery.toggle-password演示_doweboktitle>
        <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 ));

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

你可能感兴趣的:(javascript)