jquery-Fokus rein / raus

Lesezeit: 2 Minuten

Ich möchte die Klasse “aktiv” zur Eingabe des Eingabefokus hinzufügen und diese Klasse entfernen, wenn der Fokus deaktiviert ist.

Danke

Sobald Sie die jquery lib hinzugefügt haben, ist es ziemlich Standard

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

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

focus und blur sind besser geeignet als focusin und focusout für reine Eingangsfokussierung. Focusin- und Focusout-Bubble-Ereignisse auf Kinderobjekte und zum größten Teil ist das hier (wahrscheinlich) unnötig.

ziemlich Standard-Zeug. Weitere Informationen finden Sie in der jquery-Dokumentation. Ändern Sie möglicherweise auch den Selektor (den ‘Eingabe’-Teil), wenn Sie ihn nur für bestimmte Eingabefelder benötigen.

Selektor Beispiele:

$(‘input#my_id_is_bob’) für $(‘input.my_class_is_activatable’) für

Benutzeravatar von ozarius
Ozarius

Wenn Ziel-ID die ID der Eingabe ist, auf der Sie die Klasse ein- und austauschen möchten, könnten Sie so etwas verwenden:

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

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

Dies würde Ihr Problem lösen

  • Das funktioniert bei mir nicht, vielleicht ist es ein Problem in der Jquery-Version. Ich habe: jquery-1.4.2.min.js

    – irgendwoInPHP

    24. Januar 2011 um 21:10 Uhr

Versuche Folgendes.

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

Benutzeravatar von honk31
hupe31

jQuery on() würde so aussehen:

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

oder extra extra kurz:

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

Alternativen für Focus & Blur sind “Focusin” und “Focusout”, sind aber sprudelnde Ereignisse, wie Michael Glass betonte.

Das focusin-Ereignis wird an ein Element gesendet, wenn es oder ein beliebiges Element darin den Fokus erhält. Dies unterscheidet sich vom Fokusereignis dadurch, dass es das Erkennen des Fokusereignisses auf übergeordneten Elementen unterstützt (mit anderen Worten, es unterstützt das Ereignis-Bubbling).

Benutzeravatar von nunopolonia
Nunopolonia

Sie können jQuery verwenden focus Und blur Funktionen

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

Bhavyas Benutzeravatar
Bhavya

Sie wollen wahrscheinlich so etwas wie $(this).attr('class','active'); in deinem focusin Und $(this).attr('class',''); in deinem focusout.

  • Ja, ich habe den nächsten Code eingefügt und er funktioniert nicht: $(document).ready(function() { $(“input”).focusin(function() { $(this).addClass(‘active’); } ); $(“input”).focusout(function() { $(this).removeClass(‘active’); }); });

    – irgendwoInPHP

    24. Januar 2011 um 21:05 Uhr


1442720cookie-checkjquery-Fokus rein / raus

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy