jQuery六位密码输入框


jQuery简单实现六位密码输入框这个小玩意,简单到不想赘述,上代码吧还是。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{width:480px;height:62px;margin:200px auto 80px;text-align: center;}
            #box input{
                width:60px;
                height:60px;
                line-height: 60px;
                display: inline-block;
                border:1px solid #e3e3e3;
                background-color: #f5f5f5;
                text-align: center;
                font-size: 24px;
                font-weight: bold;
            }
            button{
                display: block;
                padding:7px 25px;
                margin:auto;
                border:1px solid #f43b51;
                background-color: #F43B51;
                color: white;
                font-size: 18px;
                border-radius: 10px;
                cursor: pointer;
            }
            button:hover{opacity: 0.7;}
        </style>
    </head>
    <body>
        <div id="box">
            <input type="text" name="password" value="" maxlength="1"/>
            <input type="text" name="password" value="" maxlength="1" disabled="disabled"/>
            <input type="text" name="password" value="" maxlength="1" disabled="disabled"/>
            <input type="text" name="password" value="" maxlength="1" disabled="disabled"/>
            <input type="text" name="password" value="" maxlength="1" disabled="disabled"/>
            <input type="text" name="password" value="" maxlength="1" disabled="disabled"/>
        </div>
        <button id="reset" type="reset">重置</button>
        <script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var passwordStr = '';
            $(document).ready(function(){
                $("#box input").eq(0).focus();
                $("#box input").keyup(function(){
                    if(!parseInt($(this).val())){
                        $(this).val('');
                        return false;
                    }
                    if(parseInt($(this).index())+1<=$("#box input").length){
                        passwordStr += $(this).val();
                        console.log(passwordStr);
                        $(this).blur();
                        $(this).val('');
                        $(this).attr('disabled','true');
                        if(parseInt($(this).index())+1<=$("#box input").length){
                            $(this).next('input').removeAttr('disabled');
                            $(this).next('input').focus();
                        }
                    }
                });
                $("#reset").click(function(){
                    $("#box input").val('');
                    $("#box input").attr('disabled','disabled');
                    $("#box input").eq(0).removeAttr('disabled');
                    $("#box input").eq(0).focus();
                    passwordStr = '';
                });
            });
        </script>
    </body>
</html>

 

生活平凡的,又是单调的,人生是散淡的,又是艰难的,于是我们常常会乏味和寂寞。生活是缤纷的,又是无奈的,人生是复杂的,又是美好的,于是我们常常会浮躁和失落。

  路,不通时,选择拐弯;心,不快时,选择看淡;情,渐远时,选择随意。

  放下所有一切让你累的事情,每天都是新的。

  换一种轻松的活法,获一身爽适的健康。多倾听生命的声音,多采人性的光辉,就能够更多的感悟人生真谛。开启智慧的心灵,就能把握美好的生活,并时时在质量生活的海洋中畅游。

  有些事,挺一挺,就过去了;有些人,狠狠心,就忘记了;有些苦,笑一笑,就释然了;有颗心,伤一伤,就坚强了。

  假如人生没有酸甜苦辣的感受,怎能晓知生活的艰辛与甘美呢?要是没有丰富的人生感受,那么生活只是简单有短暂的拼盘。

  我们最多也就是一个有故事的人,生活中、工作中遇到不顺的事,对自己说一声,都会过去的。

  今天再大的事,到了明天就是小事;今年再大的事,到了明年就是故事;今生再大的事,到了来世只是传说。

  人生于世,倘若能够拥有一付达观的心境,便能超然脱俗不为世事所累,面对一切,可以引吭高歌,可以豪饮一醉,也可以平静如水。

  多一点快乐,少一点烦恼。累了就睡觉,醒了就微笑。想生活怎么样,还得自己放调料。

  世界上的每一个人,都想追求幸福、有一个可以得到幸福的可靠方法,就是以控制你的思想来得到。幸福并不是依靠外在的情况,而是依靠内在的情况。你的笑容就是你好意的信使;你的笑容能照亮所有看到它的人;对那些整天都看到皱眉头、愁容满面、视若无睹的人来说,你的笑容就像穿过乌云的太阳。--摘抄自《微笑着去生活》作者:浅墨书清语。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM