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