jquery focus in / out

Question

I would like is to add class "active" to input on input focus, and when focus off, remove that class.

Thank's

Answer 1

once you've included the jquery lib, it's pretty standard

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

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

focus and blur are more appropriate than focusin and focusout for just input focusing. focusin and focusout bubble events to children objects and for the most part, that's (likely) unnecessary here.

pretty standard stuff. take a look at the jquery docs for more. also maybe modify the selector (the 'input' part) if you only want it for particular input fields.

selector examples:

$('input#my_id_is_bob') for $('input.my_class_is_activatable') for

Answer 2

If target-id is the id of the input on which you want to swap the class in and out, you could use something like this:

$('#target-id').focusin(  
  function(){  
    $(this).addClass('active');  
  }).focusout(  
  function(){  
    $(this).removeClass('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");
});

This would solve your problem

Answer 4

Try the following.

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