jquery focus in/out

Question

入力フォーカスに入力するクラスを「アクティブ」に追加し、フォーカスをオフにしてクラスを削除します。

感謝の

Answer 1

を解決するだろう、それはかなり標準です

$('input').focus(function() { 
    $(this).addClass('active'); 
}); 

$('input').blur(function() { 
    $(this).removeClass('active'); 
}); 

フォーカスとブラーが中心だけ入力用とfocusInとfocusoutよりも適切です。 focusinとバブルイベントを子オブジェクトにフォーカスすることができます。そのほとんどは、ここでは不要です（おそらく）。

かなり標準的なもの。詳細については、jqueryドキュメントをご覧ください。特定の入力フィールドに対してのみ必要な場合は、セレクタ（ 'input'部分）を変更することもできます。

セレクタ例：

Answer 2

あなたはおそらく、あなたのfocusoutであなたのfocusinと$(this).attr('class','');に$(this).attr('class','active');ような何かをしたいです。

Answer 3

$("#id-of-your-field").focusin(function() { 
    $('#id-of-your-field').addClass("active"); 
}); 
$("#id-of-your-field").focusout(function() { 
    $('#id-of-your-field').removeClass("active"); 
}); 

あなたはjQueryのlibが含ましたらこれはあなたの問題

Answer 4

ため $（ 'input.my_class_is_activatable'）のための

$（ '入力＃1 my_id_is_bob'）あなたはjQueryのfocusとblur機能

$('input[type="text"]').focus(function() { 
    $(this).addClass("active"); 
}); 
$('input[type="text"]').blur(function() { 
    $(this).removeClass("active"); 
}); 

Answer 5

てみてくださいを使用することができます以下。

$("input[type=text]").focus(function(){ 
    $(this).addClass("active"); 
}).focusOut(function(){ 
    $(this).removeClass("active"); 
}); 

Answer 6

ターゲット-idはあなたがinとoutクラスを交換したい入力のIDである場合、あなたはこのようなもの使用することができます

$('#target-id').focusin( 
    function(){ 
    $(this).addClass('active'); 
    }).focusout( 
    function(){ 
    $(this).removeClass('active'); 
    }); 

Answer 7

それとも、より良いこれを使用しようとは：

$('input[type="text"]').focus(function() { 
    $(this).addClass("active"); 
}).blur(function() { 
    $(this).removeClass("active"); 
}); 

Answer 8

もっと便利なコードあなたは、「共有フォーム」のような入力要素を使用し、ボタンを使用している場合か、does't非表示のフォームより何か「というメッセージ送信」：

を

$('input').on("focus", function() { 
    $(this).addClass('active'); 
}).on("blur", function() { 
    $(this).removeClass('active'); 
}); 

や余分な余分な短い：フォーカス&ぼかし用

$('input').on("focus blur", function() { 
    $(this).toggleClass('active'); 
}); 

選択肢 "とfocusIn" と "focusout" ですが、マイケル・ガラスなどのイベントをバブリングしている

$(function() { 
    $("html").click(function(e) { 
     if (e.target.id == "your_id_element") { 
      $('#your_id_elements').addClass('open'); 
     } else if($(e.target).closest('.some_div_without_reaction').length == 0) { 
      if($('#your_id_element').hasClass('open') && $('#your_id_element').val()==''){ 
       $('#your_id_element').removeClass('open'); 
      } 
     } 
    }); 
}) 

Answer 9

jQuery on()は次のようになります。指摘した。

focusinイベントは、要素またはその内部の要素がフォーカスを取得したときに要素に送信されます。これは、親要素のフォーカスイベントの検出をサポートするという点で、フォーカスイベントとは異なります（つまり、イベントのバブルをサポートします）。

Answer 10

その後、event.type

$(element).bind("focus blur", function(event){ 
    event.stopPropagation(); 
    if(event.type == "focus") 
     { 
     // Input focused/clicked 
     $(element).addClass('active'); 
     } 

    else if(event.type == "blur") 
     { 
     // Lost focus 
     $(element).removeClass('active'); 
     } 
});