入力が値を持っているかどうかjQueryライブチェック

Question

jQueryを使用して入力に値があるかどうかを確認するにはどうすればよいですか？

if ($("#reference").filter(function() { return $(this).val(); }).length > 0) { 
    //.. 
} 

そのページのロード時のみチェックし、どのように私は、ユーザーが#referenceで値を変更するか、それがすべて空白のままにするとき確認することができますか？

Answer 1

入力フィールドがchangeイベントを持っている、あなたはそれを聞くことができます。

jQuery(document).ready(function($) { 
 
    var $field = $("#reference"); 
 
    
 
    
 
    $field.on('change', function() { 
 
    var value = $field.val(); 
 
    
 
    console.log('do your validation with ', value); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="reference" />

ただ、注意

jQuery(..).filterはjQueryのを軽減するために使用されるべきセットを包んだが、 、idは一意のdom要素を示すと考えられるため、フィルタは完全に不要です。 $('#reference').val();

Answer 2

$("#target").keyup(function() { 
    alert("user is typing"); 
    }); 

ユーザーがsomething.Inあなたが活発なチェック値は、ユーザーが入力したことができ、このように入力された場合にアラートが表示されます。

あなたが動的に追加されたオブジェクトのイベントを処理できるように（ライブにロードされている場合）

$("#target").keyup(function() { 
    if($(this).val()=="something") 
    { 
     #your code go here 
    } 

    }); 

Answer 3

ただ、このようにjQueryの.on()メソッドを使用します。

• あなたがの場合に.on('change')イベントを使用する必要がありますselectフィールド。
• .on('input')イベントは、inputフィールドの場合に使用してください。

$(function(){ 
 

 
    
 
    $('body').on('change', "#mySelect", function() { 
 
     var value = $(this).val(); 
 

 
     console.log('Selected Value: ', value); 
 
    }); 
 
    
 
    $('body').on('input', "#myInput", function() { 
 
     if($(this).val().length) { 
 
     var hasVal = true; 
 
     } else { 
 
     var hasVal = false; 
 
     } 
 
     console.log('Input has value (true/false): ', hasVal + " (" + $(this).val() + ")"); 
 
    }); 
 
    
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <select id="mySelect"> 
 
    <option value="a">Select A</option> 
 
    <option value="b">Select B</option> 
 
    <option value="c">Select C</option> 
 
    <option value="d">Select D</option> 
 
    </select> 
 
    
 
    <input type="text" id="myInput"> 
 
</div>

この情報がお役に立てば幸い！