Usando jQuery para probar si una entrada tiene foco
En la página principal de un sitio que estoy construyendo, varios <div>mensajes de correo electrónico usan la :hoverpseudoclase CSS para agregar un borde cuando el mouse está sobre ellos. Uno de los <div>s contiene un <form>que, usando jQuery, mantendrá el borde si una entrada dentro de él tiene foco. Esto funciona perfectamente excepto que IE6 no admite :hoverningún elemento que no sea <a>s. Entonces, solo para este navegador estamos usando jQuery para imitar CSS :hoverusando el $(#element).hover()método. El único problema es que ahora que jQuery maneja tanto el formulario focus() como hover() , cuando una entrada tiene el foco, el usuario mueve el mouse hacia adentro y hacia afuera, el borde desaparece.
Estaba pensando que podríamos usar algún tipo de condicional para detener este comportamiento. Por ejemplo, si probáramos con el mouse fuera si alguna de las entradas tenía foco, podríamos evitar que el borde desaparezca. AFAIK, no hay ningún :focusselector en jQuery, así que no estoy seguro de cómo hacer que esto suceda. ¿Algunas ideas?
jQuery 1.6+
jQuery agregó un :focusselector por lo que ya no necesitamos agregarlo nosotros mismos. Solo usa$("..").is(":focus")
jQuery 1.5 y anteriores
Editar: a medida que los tiempos cambian, encontramos mejores métodos para probar el enfoque, el nuevo favorito es esta esencia de Ben Alman :
jQuery.expr[':'].focus = function( elem ) {
return elem === document.activeElement && ( elem.type || elem.href );
};
Citado de Mathias Bynens aquí :
Tenga en cuenta que la
(elem.type || elem.href)prueba se agregó para filtrar falsos positivos como el cuerpo. De esta manera, nos aseguramos de filtrar todos los elementos excepto los controles de formulario y los hipervínculos.
Estás definiendo un nuevo selector. Consulte Complementos/Autoría . Entonces puedes hacer:
if ($("...").is(":focus")) {
...
}
o:
$("input:focus").doStuff();
Cualquier jQuery
Si solo desea averiguar qué elemento tiene el foco, puede usar
$(document.activeElement)
Si no estás seguro de si la versión será 1.6 o inferior, puedes agregar el :focusselector si falta:
(function ( $ ) {
var filters = $.expr[":"];
if ( !filters.focus ) {
filters.focus = function( elem ) {
return elem === document.activeElement && ( elem.type || elem.href );
};
}
})( jQuery );
CSS:
.focus {
border-color:red;
}
jQuery:
$(document).ready(function() {
$('input').blur(function() {
$('input').removeClass("focus");
})
.focus(function() {
$(this).addClass("focus")
});
});
