USERNAME和PASSWORD冻结,输入错误的登录凭据两次

时间:2016-05-08 16:41:03

标签: jquery html ios html5 css3

如果输入错误的登录凭据两次,则 USERNAME 密码的文本字段会冻结。即,我无法输入输入字段中的任何字符

  1. 应用:原生(iOS)
  2. Tech:HTML5,CSS3,jQuery,Javascript,Ajax
  3. 通过jQuery验证用户名和密码。
  4. 以下是应用登录界面的屏幕截图

    enter image description here

    
    
    $('#btn_submit').on('touchend',function(){
    	
        $('#email,#password').blur();
    	$('#email,#password').css('cursor','none');
        login=0;
      $.getJSON( "js/login.json", function( data ) {
            for(i=0;i<data.login.length;i++){
                if(($("input[name='email']").val() == data.login[i].username) && ($("input[name='password']").val() == data.login[i].password) ){
                    localStorage.setItem('username', $("input[name='email']").val());
                    setVariables();
                    $('#LoginScreen').hide();
                    $("#admin").show();
                    login=1;
                    return;
                }
                else{
                   
                   //login=0;
                }
                
            }
             if(login==0){
                sweetAlert("Oops...", "Please check the username and password!", "error");
            }
    
        });
       
        return false;
    });
    
    $('#home-btn').on("touchend", function() {
    $('#container').load('main.html',function(){
       if($('#container').attr('data-user')=='internal')
          {
            $('#admin #section04,#admin #section03').show();
           }
       $('#LoginScreen').hide();
       $("#admin").show();
       $('#container').attr('data-page','index');
            
    });
    }
    &#13;
    .customer_login {
      width: 308px;
      height: 270px;    
      top: 200px;
      left: 370px;
      position: absolute;
    }
    .customer_login .form-row{
      margin-bottom: 8px;
    }
    textarea:focus, input:focus, button:focus{
        outline: none;
    } 
    .customer_login input{
        border: 1px solid #414c60;
        padding: 17px 19px;
        width: 267px;
        font-size: 15.5px;
        color: #fff;
        background-color: #010918;
        opacity: 0.4;
        border-radius: 0px;
        -webkit-user-select: text;
    }
    .login_title {
      width: 248px;
      height: 49px;
      background-image: url(../images/title_ico.png);
      background-repeat: no-repeat;
      background-position: 11px 8px;
      background-size: 32px 32px;
      background-color: #1d7e93;
      top: 100px;
      font-size: 20px;
      line-height: 48px;
      color: #fff;
      padding-left: 60px;
      margin-bottom: 16px;
      font-family: 'HelveticaNeueLTStdLt';
    }
    .customer_login button {
        width: 134px;
        height: 48px;
        background-image: url(../images/submit_arr.png);
        background-repeat: no-repeat;
        background-position: 108px center;
        background-size: 16px 17.5px;
        background-color: #6c8f24;
        font-size: 20px;
        line-height: 44.5px;
        color: #fff;
        padding-left: 20px;
        margin: 20px 0 0 172px;
        border: 0;
        text-align: left;
        font-family: 'HelveticaNeueLTStdLt';
        cursor: pointer;
    }
    &#13;
    <div class="customer_login">
                    <div class="login_title">Sign in</div>
                    <form method="get" action="#">
                        <div class="form-row">
                            <input type="email" name="email" id="email" placeholder="User ID">
                        </div>
                        <div class="form-row">
                            <input type="password" name="password" id="password" placeholder="●●●●●">
                        </div>
                        <div class="form-row">
                            <button type="submit" id="btn_submit">Submit</button>
                        </div>
                    </form>
                </div>
    &#13;
    &#13;
    &#13;

0 个答案:

没有答案