javascript----四位验证码实现

最新推荐文章于 2022-06-20 10:59:10 发布
weixin_33694172
最新推荐文章于 2022-06-20 10:59:10 发布
阅读量358
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/SunlikeLWL/p/7715727.html
版权
1、效果图
2、代码实现
<html>

<head>
    <meta charset="tf-8">
    <title>17.com</title>
    <style>
    /* 
   验证码框
 */

    .load-message {
        width: 1180px;
        background: white;
        margin: 0 auto;
    }

    .load-message .message {
        width: 446px;
        margin: 0 auto;
        padding: 40px 0 0 0;
    }

    .load-message .message .tip2 {
        height: 23px;
    }

    .load-message .message .tip3 a {
        display: inline-block;
        width: 140px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        font-size: 14px;
        text-decoration: none;
        float: left;
        margin: 0 0 0 10px;
        border-radius: 3px;
    }

    .before {
        background: #2C88F3;
        color: white;
    }

    .before:hover {
        background: #217CE3;
    }


    .input_form {
        height: 62px;
    }

    .form_paypsw {
        width: 240px;
        height: 62px;
        float: left;
    }

    .sixDigitPassword {
        position: absolute;
        top: 0;
        width: 240px;
        height: 48px;
        color: #fff;
        font-size: 12px;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-user-select: initial;
        outline: 'none';
        z-index: 999;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .sixDigitPassword-box {
        width: 240px;
        height: 28px;
        cursor: text;
        background: #fff;
        outline: none;
        position: relative;
        padding: 10px 0;
        border-radius: 2px;
    }

    .sixDigitPassword-box i {
        width: 58px;
        float: left;
        display: block;
        padding: 10px 0;
        height: 10px;

        border-left: 1px solid #cccccc;
    }

    .sixDigitPassword-box .active {
        background: url('/imgs/password-blink.gif') no-repeat center center;
    }

    .sixDigitPassword-box b {
        display: block;
        margin: 0 auto;
        width: 7px;
        height: 7px;
        overflow: hidden;
        visibility: hidden;
        background: url('/imgs/passeord-dot.png') no-repeat;
    }

    .sixDigitPassword-box span {
        position: absolute;
        display: block;
        left: 0px;
        top: 0px;
        width: 58px;
        height: 48px;
        border: 1px solid rgba(82, 168, 236, .8);
        border: 1px solid #00ffff\9;
        border-radius: 2px;
        visibility: hidden;
        -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.75), 0 0 8px rgba(82, 168, 236, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }

    .ui-securitycore .ui-form-item .ui-form-explain {
        margin-top: 8px;
    }

    .i-block {
        display: inline-block;
    }

    .six-password {
        display: inline-block;
        position: relative;
        width: 237px;
        height: 50px;
        overflow: hidden;
        vertical-align: middle;
        border: 1px solid #cccccc;
    }
    </style>
</head>

<body>
    <div class="load-message">
        <div class="message">
            <p class="tip2">请输入4位验证码：</p>
            <div class='input_form tip3'>
                <form action="" method="post" name="payPassword" id="form_paypsw" class='form_paypsw'>
                    <div id="payPassword_container" class="alieditContainer clearfix left-input" data-busy="0">
                        <div class="i-block" data-error="i_error">
                            <div class="i-block six-password">
                                <input class="i-text sixDigitPassword" id="payPassword_rsainput" type="password" autocomplete="off" required="required" value="" name="payPassword_rsainput" data-role="sixDigitPassword" tabindex="" maxlength="6" minlength="6" aria-required="true">
                                <div tabindex="0" class="sixDigitPassword-box">
                                    <i style="border-color: transparent;" class=""><b style="visibility: hidden;"></b></i>
                                    <i><b style="visibility: hidden;"></b></i>
                                    <i><b style="visibility: hidden;"></b></i>
                                    <i><b style="visibility: hidden;"></b></i>
                                    <span style="left: 0px; visibility: hidden;" id="cardwrap" data-role="cardwrap"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div class='right-btn'>
                    <a href="#" class='get-qr-code before'>
                            获取验证码
                        </a>
                </div>
            </div>
        </div>
        <script src='js/jquery-1.8.3.min.js'></script>
        <script>
        $(function(window, $) {
            initQrCodeEvent();

            function initQrCodeEvent() {
                var payPassword = $("#payPassword_container"),
                    _this = payPassword.find('i'),
                    k = 0,
                    j = 0,
                    password = '',
                    _cardwrap = $('#cardwrap');
                //点击隐藏的input密码框,在6个显示的密码框的第一个框显示光标
                payPassword.on('focus', "input[name='payPassword_rsainput']", function() {

                    var _this = payPassword.find('i');
                    if (payPassword.attr('data-busy') === '0') {
                        //在第一个密码框中添加光标样式
                        _this.eq(k).addClass("active");
                        _cardwrap.css('visibility', 'visible');
                        payPassword.attr('data-busy', '1');
                    }

                });
                //change时去除输入框的高亮，用户再次输入密码时需再次点击
                payPassword.on('change', "input[name='payPassword_rsainput']", function() {
                    _cardwrap.css('visibility', 'hidden');
                    _this.eq(k).removeClass("active");
                    payPassword.attr('data-busy', '0');
                }).on('blur', "input[name='payPassword_rsainput']", function() {

                    _cardwrap.css('visibility', 'hidden');
                    _this.eq(k).removeClass("active");
                    payPassword.attr('data-busy', '0');

                });

                //使用keyup事件，绑定键盘上的数字按键和backspace按键
                payPassword.on('keyup', "input[name='payPassword_rsainput']", function(e) {
                    var e = (e) ? e : window.event;
                    //键盘上的数字键按下才可以输入
                    if (e.keyCode == 8 || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
                        k = this.value.length; //输入框里面的密码长度
                        l = _this.size(); //6
                        for (; l--;) {
                            //输入到第几个密码框，第几个密码框就显示高亮和光标（在输入框内有2个数字密码，第三个密码框要显示高亮和光标，之前的显示黑点后面的显示空白，输入和删除都一样）
                            if (l === k) {
                                _this.eq(l).addClass("active");
                                _this.eq(l).find('b').css('visibility', 'hidden');

                            } else {
                                _this.eq(l).removeClass("active");
                                _this.eq(l).find('b').css('visibility', l < k ? 'visible' : 'hidden');

                            }
                            if (k === 4) {
                                j = 3;
                            } else {
                                j = k;
                            }
                            $('#cardwrap').css('left', j * 59 + 'px');

                        }
                    } else {
                        //输入其他字符，直接清空
                        var _val = this.value;
                        this.value = _val.replace(/\D/g, '');
                    }
                });
            }
        }(window, jQuery))
        </script>
</body>

</html>
　　3、总结
转载于:https://www.cnblogs.com/SunlikeLWL/p/7715727.html
weixin_33694172
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript----四位验证码实现

1、效果图2、代码实现<html><head> <meta charset="tf-8"> <title>17.com</title> <style> /* 验证码框 */ .load-message { w...
复制链接

扫一扫