una vez que haya incluido jquery lib, es bastante estándar

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

el enfoque y el desenfoque son más apropiados que el enfoque y el enfoque solo para el enfoque de entrada. Enfocar y enfocar eventos de burbujas en objetos secundarios y, en su mayor parte, eso es (probablemente) innecesario aquí.

cosas bastante estándar. eche un vistazo a los documentos de jquery para obtener más información. también puede modificar el selector (la parte de 'entrada') si solo lo desea para campos de entrada particulares.

ejemplos de selectores:

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

Si target-id es la identificación de la entrada en la que desea intercambiar la clase dentro y fuera, podría usar algo como esto:

 $('#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"); });

Esto solucionaría tu problema