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

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');  
  });

$("#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