enfoque jquery dentro/fuera

Me gustaría agregar la clase “activa” a la entrada en el foco de entrada, y cuando se desactive, eliminar esa clase.

Gracias

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

Pruebe lo siguiente.

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

jQuery en () se vería así:

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

o extra extra corto:

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

las alternativas para el enfoque y el desenfoque son “focusin” y “focusout”, pero son eventos burbujeantes como señaló Michael Glass.

El evento focusin se envía a un elemento cuando este, o cualquier elemento dentro de él, obtiene el foco. Esto es distinto del evento de enfoque en que admite la detección del evento de enfoque en los elementos principales (en otras palabras, admite el burbujeo de eventos).

Puedes usar jQuery’s focus y blur funciones

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

Probablemente quieras algo como $(this).attr('class','active'); en tus focusin y $(this).attr('class',''); en tus focusout.