為什么我不能使用jQuery的.keypress（）、. keydown（）和.keyup（）事件正確比較兩個字符串？

Question

我想使用javascript驗證兩個輸入。 我正在使用jQuery's .keypress()事件直接驗證輸入的值。 這是我在laravel框架中的代碼：

HTML

<div class="form-group">
    <label for="inputPassword"><h4>Password:</h4></label>
    {{ Form::password('password',array('class'=>'span3 form-control', 'id'=>'password', 'placeholder'=>'Password')) }}
</div>
<div class="form-group">
    <label for="verifyPassword"><h4>Verify Password:</h4></label>
    {{ Form::password('password',array('class'=>'span3 form-control', 'id'=>'verify-password', 'placeholder'=>'Verify Password')) }}
</div>
<div class="form-group">
    <div class="alert alert-danger hide" id="alert-verify-password-remove">
        Password don't match!
        <div class="glyphicon glyphicon-remove alert-icon-padding-remove"></div>
    </div>
</div>
<div class="form-group">
    <div class="alert alert-success hide" id="alert-verify-password-ok">
        Password matched!
        <div class="glyphicon glyphicon-ok alert-icon-padding-ok"></div>
    </div>
</div>

JS

$(document).ready(function(){
        $( "#verify-password" ).keypress(function() {
          // get password value from first password field
          var pwd = $('#password').val();
          // get the 2nd password value from the verify password field
          var vPwd = $('#verify-password').val();
          // verify the values if they are matched
          // if matched then show match alert | hide unmatch alert
          if (pwd == vPwd) {
                $("#alert-verify-password-ok").removeClass('hide');
                $("#alert-verify-password-remove").addClass('hide');
          } // else, show unmatch alert | hide match alert
          else {
                $("#alert-verify-password-remove").removeClass('hide');
                $("#alert-verify-password-ok").addClass('hide');
          }
        });
});

我遇到的問題是，例如，如果我在#password字段上鍵入的是test那么在#verify-password字段中，我必須在第4個字符之后鍵入tests或任何字符，然后驗證才能驗證其正確/匹配。 這是顯示正在發生的事情的圖片。

正如你所看到的，我必須鍵入5（ tests ）的字符，而不是4（ test ）之前確定的值相同。 有人可以給我提供見解嗎，至少可以給我合適的解決方案。 謝謝。

Answer 1

因為keypress發生在實際更改字符串之前（因此您可以取消更改字符串）

對這些測試使用keyup事件

...
 $( "#verify-password" ).keyup( function() {
...

更改字符串后會觸發keyup ，因此test中的值將與您看到的值相同

Answer 2

您需要使用keyup ，因為它是在keypress后觸發的。 您可以here看到例如

$( "#verify-password" ).keyup( function() {