È possibile concentrarsi su una <div> utilizzando la funzione JavaScript focus ()?

È possibile concentrarsi su una funzione <div>JavaScript utilizzando focus()?

Ho un <div>tag

<div id="tries">You have 3 tries left</div>

Sto cercando di concentrarmi su quanto sopra <div>usando:

document.getElementById('tries').focus();

Ma non funziona Qualcuno potrebbe suggerire qualcosa ....?

window.location.hash = '#tries';

Questo scorrerà fino all'elemento in questione, essenzialmente "focalizzandolo" su di esso.

Sì, questo è possibile. Per farlo, devi assegnare un tabindex ...

<div tabindex="0">Hello World</div>

Un tabindex di 0 inserirà il tag "nell'ordine di tabulazione naturale della pagina". Un numero più alto gli darà un ordine specifico di priorità, dove 1 sarà il primo, 2 secondi e così via.

Puoi anche dare un tabindex di -1, il che renderà il div focalizzabile solo dallo script, non dall'utente.

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

Ovviamente, è un peccato avere un elemento che puoi focalizzare con uno script che non puoi focalizzare con altri metodi di input (specialmente se un utente è solo tastiera o vincolato in modo simile). Ci sono anche un sacco di elementi standard che sono focalizzabili di default e hanno informazioni semantiche integrate per aiutare gli utenti. Usa saggiamente questa conoscenza.

document.getElementById('tries').scrollIntoView()lavori. Funziona meglio di window.location.hash quando hai un posizionamento fisso.

Puoi usare tabindex

<div tabindex="-1"  id="tries"></div>

Il valore tabindex può consentire alcuni comportamenti interessanti.

• Se viene assegnato un valore "-1", l'elemento non può essere tabulato ma lo stato attivo può essere assegnato all'elemento a livello di codice (usando element.focus ()).
• Se viene assegnato un valore pari a 0, l'elemento può essere focalizzato tramite la tastiera e rientra nel flusso di tabulazione del documento. I valori maggiori di 0 creano un livello di priorità con 1 è il più importante.

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

Volevo suggerire qualcosa come quello di Michael Shimmin, ma senza codificare cose come l'elemento o il CSS ad esso applicato.

Sto solo usando jQuery per aggiungere / rimuovere la classe, se non vuoi usare jquery, hai solo bisogno di un sostituto per add / removeClass

--Javascript

function highlight(el, durationMs) { 
  el = $(el);
  el.addClass('highlighted');
  setTimeout(function() {
    el.removeClass('highlighted')
  }, durationMs || 1000);
}

highlight(document.getElementById('tries'));

--CSS

#tries {
    border: 1px solid gray;
}

#tries.highlighted {
    border: 3px solid red;
}

Per far lampeggiare il bordo puoi farlo:

function focusTries() {
    document.getElementById('tries').style.border = 'solid 1px #ff0000;'
    setTimeout ( clearBorder(), 1000 );
}

function clearBorder() {
    document.getElementById('tries').style.border = '';
}

Ciò renderà il bordo rosso fisso per 1 secondo, quindi rimuoverlo di nuovo.