jquery - .keyupで入力が空の場合、JqueryはCSSを追加します

Question

キーアップの入力に CSS を追加しようとしています。入力が空の場合は、CSS を追加します。私はこれを試しました...

            $(input).keyup(function() {
                var input = $(this).attr('id');
                if( input == "" ) {
                  $(input).css( "border", "1px solid #FB9E25" );
                }   
            });

Answer 1

http://jsfiddle.net/DKW7M/

HTML

<input type="text" id="test" />

JS:

$("#test").keyup(function() {
                var input = $(this);

                if( input.val() == "" ) {
                  input.css( "border", "1px solid #000" );
                }   
            });

見やすいように黒にしました。

複数の ID に対して実行する場合は、次を試してください。

<form id="some_form">
 <input type="text" />
 <input type="text" />
</form>

$("#some_form input").each(function() {
     $(this).keyup(function() {

                var input = $(this);

                if( input.val() == "" ) {
                  input.css( "border", "1px solid #000" );
                }   
            });
   });

Answer 2

これを試して：

$('input').keyup(function() {
            var input = $(this).attr('id');
            if( input == "" || input == null) {
              $(this).css( "border", "1px solid #FB9E25" );
            }   
        });

Answer 3

つまり、値がない場合に css を追加する場合は、次のように変更します。

$(input).keyup(function() {
     var input = $.trim( $(this).val() );
     if( input == "" ) {
         $(this).css( "border", "1px solid #FB9E25" );
     }   
});

Answer 4

別の名前を使用してみてください:

$(input).keyup(function() {
    var inputId = $(this).attr('id');
    if( inputId == "" ) {
        $(input).css( "border", "1px solid #FB9E25" );
    }   
});