문자를 삭제할 때 다시 계산

Question

내 2 개의 변수에 각각 3 자 및 5자를 사용할 때 버튼의 "비활성화 됨"속성을 제거하는 스크립트가 있습니다.

하지만 내 문자를 삭제하면 다시 계산되지 않고 "비활성화 된"attr을 내 버튼에 다시 추가합니다. 나는 어떻게하는지 모른다. 어떤 제안?

은 뿐인 : http://jsfiddle.net/CCwKp/

HTML

<form action="" method="" class="login"> 
    <ul class="userLogin"> 
     <li> 
      <input type="text" placeholder="E-mail" class="user" /> 
     </li> 
     <li> 
      <input type="password" placeholder="Senha" class="pass" /> 
     </li> 
     </ul> 
    <button disabled />test</button> 
</form> 

JS는

$(function() { 
    var user = 0; 
    var pass = 0; 

    function userPassAlert() { 
     if (user >= 3 && pass >=5) { 
      $('button').removeClass('disabled').addClass('available').removeAttr("disabled"); 
     } else { 
      $('button').removeClass('available').addClass('disabled').attr("disabled"); 
     } 
    }; 

    $(".user").on('focus keypress', function() { 
     user++; 
     console.log(user); 
     userPassAlert(); 
    }); 
    $(".pass").on('focus keypress', function() { 
     pass++; 
     console.log(pass); 
     userPassAlert() 
    }); 

    $('button').on('click', function (e) { 
     e.preventDefault(); 
     if (user >= 3 && pass >=5) { 
      alert("done"); 
     } 
     else { 
      return false; 
     } 
    }); 
}); 

Answer 1

세 가지 : 내가 대신 방법 userPassAlert()의 필드 값의 길이를 확인 할

1. 는 "장애인"을 추가 다시 버튼 속성, 그것은에있다 이러한 추가 될 : 카운터를 항상 사용자에게 추가된다

   $(".this").attr("disabled","disabled");

2. 가 통과/때 THER e는 마우스 클릭 또는 키 누름이므로 항상 올라가고 결코 내려 가지 않습니다. 마우스 또는 키 동작이있을 때 입력 값의 길이를 확인하기 위해 이것을 변경하면 입력 필드에있는 실제 길이를 확인합니다. 다음을 사용하여이 작업을 수행 할 수 있습니다 :

   user=$(".user").val().length;

3. 의 keyup가 키를 누를 때보다도 백 스페이스를 처리하는 것이 좋습니다. "on"함수에서이를 대체하면보다 정확한 결과를 얻을 수 있습니다.

JS Fiddle Here

Answer 2

당신은 당신이 문자를 제거하는 경우에도, 모든 키를 누를에 user 및 pass를 증가.

function userPassAlert() { 
    if ($('.user').val().length >= 3 && $('.pass').val().length >=5) { 
     $('button').removeClass('disabled').addClass('available').prop("disabled", false); 
    } else { 
     $('button').removeClass('available').addClass('disabled').prop("disabled", true); 
    } 
};