jquery focus non attiva il fuoco css

Question

Sembra esserci un problema quando si imposta lo stato attivo su un elemento usando jquery. Apparentemente non attiva la proprietà: focus css impostata su un elemento.

Per esempio nel mio css ho:

div.item1:focus { border:2px solid red; } 

nel mio jQuery ho: è impostato

$("div.item1").focus(); 

La messa a fuoco, ma non v'è alcun bordo rosso applicato all'elemento.

Answer 1

div elementi non usa il selettore :focus .. vedi the CSS2 spec

L': focus pseudo-classe applica mentre un elemento ha il focus (accetta eventi di tastiera o altre forme di immissione di testo).

Si potrebbe fare questo:

.hoverclass { border:2px solid red; } 

$("div.item").hover(function() { 
    $(this).addClass('hoverclass') 
},function() { 
    $(this).removeClass('hoverclass') 
}); 

Questo utilizza .hover(), .addClass() e .removeClass()

Answer 2

focus() è utilizzabile solo con elementi del modulo e link, e non funzionerà se si tenta di utilizzarlo su altri tipi di elementi.

Vedere la jQuery doc for focus() per ulteriori informazioni,

Answer 3

Da the manual:

L'evento di messa a fuoco viene inviato ad un elemento quando si guadagna messa a fuoco. Questo evento è implicitamente applicabile a un insieme limitato di elementi, come il modulo elementi (<input>, <select>, ecc.) E i collegamenti (<a href>). Nelle recenti versioni del browser , l'evento può essere esteso per includere tutti i tipi di elemento impostando esplicitamente la proprietà tabindex dell'elemento. Un elemento può ottenere lo stato attivo tramite i comandi da tastiera, come il tasto Tab, oppure facendo clic con il mouse sull'elemento.

Vedere questa risposta per un esempio: https://stackoverflow.com/a/5966034/1013082

Answer 4

Hai bisogno di fare questo:

$("div.item1").focus(function(){ 
     $("div.item1").css("border","2px solid red"); 
     }); 

Answer 5

Vai alla pagina jQuery messa a fuoco() per vedere:

L'evento di messa a fuoco viene inviato a un elemento quando diventa attivo. Questo evento è implicitamente applicabile a un insieme limitato di elementi, come il modulo elementi (<input>, <select>, ecc.) E i collegamenti (<a href>). Nelle recenti versioni del browser , l'evento può essere esteso per includere tutti i tipi di elemento impostando esplicitamente la proprietà tabindex dell'elemento. Un elemento può ottenere lo stato attivo tramite i comandi da tastiera, come il tasto Tab, oppure facendo clic con il mouse sull'elemento.

andare a studiare di PPK di attenzione per i browser qui

PPK focus Event Browser compatibility

Sembra che tutti i browser superano il test tabindex.

Answer 6

Le div possono essere messe a fuoco se hanno un attributo tabindex. Vedere questa risposta qui:

https://stackoverflow.com/a/11928222/706284