Chrome Extension: il primo link è auto-focalizzato nel popup

Question

Come faccio a interrompere l'azione predefinita dell'estensione Google Chrome per mettere a fuoco automaticamente il primo collegamento nel mio popup.html? So che probabilmente potrei fare qualche modifica rotatoria con JS o cambiare il focus: CSS, ma penso che questo stia gettando via qualcos'altro che sto cercando di fare e preferirei fermarne la causa principale.

Answer 1

Il modo più semplice (e javascript gratuito!) È semplicemente aggiungere tabindex="-1" a qualsiasi elemento a cui non si desidera ricevere la messa a fuoco automatica.

Answer 2

Forse l'auto-focus era inteso per comodità, ma spesso fa un cattivo servizio. Poiché non vedo alcun modo per fermare la causa principale, ho trovato alcune rotonde. Uno sta usando JavaScript. Chrome mette l'auto-focus dopo un breve ritardo dopo la visualizzazione del popup. È possibile sfocarlo con lo blur() ma sfocarlo troppo tardi lo farà lampeggiare momentaneamente, e cercare di sfocarlo troppo presto non farà nulla. Quindi, per trovare il momento giusto per unfocus non è facile, e questa soluzione cerca di farlo più volte durante il primo secondo dopo la visualizzazione del popup:

document.addEventListener("DOMContentLoaded", function() { 
    var blurTimerId = window.setInterval(function() { 
    if (document.activeElement != document.body) { 
     document.activeElement.blur(); 
    } 
    }, 200); 
    window.setTimeout(function() { 
    window.clearInterval(blurTimerId); 
    }, 1000); 
}); 

Un altro pure HTML solution è aggiungere tabindex = "1" al tag del corpo.

Answer 3

tabindex="-1" ha funzionato per me. Stavo aggiungendo l'autofocus a un input e non ha funzionato fino a quando non ho usato questo attributo tabindex="-1" per ogni collegamento prima dell'input.

Strano a dir poco.

Answer 4

Dispute l'elemento inizialmente concentrata con un attributo tabindex è probabilmente il modo migliore per andare, utilizzando:

• tabindex="-1", come suggerito da Paul Ferret per evitare che un elemento di ottenere attenzione
• tabindex="1", come suggerito da link0ff, per specificare quale elemento dovrebbe iniziare con il fuoco

Se la situazione è più complicata e si non wan t per portare in alcuni javascript, mi consiglia di utilizzare la soluzione di link0ff, ad eccezione, invece di cercare di indovinare quando per sfocare con timeout, ascoltare il fuoco iniziale nell'evento:

function onInitialFocus(event) { 
    // Any custom behavior your want to perform when the initial element is focused. 

    // For example: If this is an anchor tag, remove focus 
    if (event.target.tagName == "A") { 
    event.target.blur(); 
    } 

    // ALSO, remove this event listener after it is triggered, 
    // so it's not applied to subsequent focus events 
    document.removeEventListener("focusin", onInitialFocus); 
} 

// NOTE: the "focusin" event bubbles up to the document, 
// but the "focus" event does not. 
document.addEventListener("focusin", onInitialFocus); 

Non credo il focus l'evento è cancellabile, quindi non puoi semplicemente sopprimere l'evento.

Answer 5

Un'altra alternativa facile (che conserva "tabbability") consiste nell'aggiungere semplicemente un collegamento vuoto (<a href="#"></a>) prima del primo collegamento effettivo. Sarà in grado di "catturare" l'auto-focus in modo invisibile da Chrome, ma tutti gli utenti che desiderano passare attraverso i collegamenti saranno comunque in grado di farlo normalmente.

L'unico aspetto negativo di questo approccio è che introduce una seconda "scheda morta" durante il ciclo; cioè, gli utenti dovranno premere scheda tre volte per tornare dall'ultimo link al primo, anziché solo due volte.