モーダル内のテキストボックスの.on（ '変更）

Question

私はテキストボックスを含むモーダルを持っています。私は、ユーザーがボックスに入力するだけで、入力が要件（長さ4）を満たしたときに関数を呼び出すことを許可したいと思います。問題は.on（ 'change'）関数は、モーダルのどこかをクリックするかモーダルを閉じるときに処理されるように見えます。私は、ブートストラップ3.3.7とjQueryを使用しています

3.1.1

$('#signInModal').modal('show'); 
 

 
$('#signInModal-passwordText').on('change', function() { 
 
    //some diagnostic stuff 
 
    $('#signInModal-failedSpan').show(); 
 
    $('#signInModal-failedSpan').html($(this).val()); 
 
    if ($(this).val().length == 4) { 
 
    //alert('4'); 
 
    signIn($(this).val()); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<div class="modal fade" tabindex="-1" role="dialog" id="signInModal"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h4 class="modal-title">Sign In</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <input id="signInModal-passwordText" type="password" class="form-control" /> 
 
     <span class="alert alert-danger" style="display: none;" role="alert" id="signInModal-failedSpan">Failed!</span> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     </div> 
 
    </div> 
 
    <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->

Answer 1

変更をトリガーするために多くのブラウザでぼかしを必要とするため

私はonkeyupの使用します。

Diffrence between keyup keydown keypress and input events

function signIn(val) { alert(val)} 
 
$('#signInModal').modal('show'); 
 

 
$('#signInModal-passwordText').on('keyup', function() { 
 
    //some diagnostic stuff 
 
    $('#signInModal-failedSpan').show(); 
 
    $('#signInModal-failedSpan').html($(this).val()); 
 
    if ($(this).val().length == 4) { 
 
    signIn($(this).val()); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<div class="modal fade" tabindex="-1" role="dialog" id="signInModal"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h4 class="modal-title">Sign In</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <input id="signInModal-passwordText" type="password" class="form-control" /> 
 
     <span class="alert alert-danger" style="display: none;" role="alert" id="signInModal-failedSpan">Failed!</span> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     </div> 
 
    </div> 
 
    <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->