É possível focar em uma <div> usando a função JavaScript focus ()?

É possível se concentrar em <div>usar a focus()função JavaScript ?

Eu tenho uma <div>etiqueta

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

Estou tentando focar no acima <div>usando:

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

Mas isso não funciona. Alguém poderia sugerir algo ....?

window.location.hash = '#tries';

Isso irá rolar para o elemento em questão, essencialmente "focando" nele.

Sim - isso é possível. Para fazer isso, você precisa atribuir um índice de tabulação ...

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

Um índice de tabulação 0 colocará a tag "na ordem de tabulação natural da página". Um número maior dará a ele uma ordem específica de prioridade, onde 1 será o primeiro, 2 segundos e assim por diante.

Você também pode fornecer um índice de tabulação -1, que tornará a div apenas focável por script, não pelo usuário.

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>

Obviamente, é uma pena ter um elemento que você possa focar por script que não possa ser focado por outro método de entrada (especialmente se um usuário tiver apenas o teclado ou restrições semelhantes). Também há vários elementos padrão que são focáveis ​​por padrão e possuem informações semânticas incorporadas para ajudar os usuários. Use esse conhecimento com sabedoria.

document.getElementById('tries').scrollIntoView()trabalho. Isso funciona melhor do que window.location.hash quando você tem um posicionamento fixo.

Você pode usar tabindex

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

O valor tabindex pode permitir algum comportamento interessante.

• Se for fornecido um valor de "-1", o elemento não poderá ser tabulado, mas o foco poderá ser atribuído ao elemento programaticamente (usando element.focus ()).
• Se o valor for 0, o elemento pode ser focado pelo teclado e cair no fluxo de tabulação do documento. Valores maiores que 0 criam um nível de prioridade, sendo 1 o mais importante.

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

Eu queria sugerir algo como o de Michael Shimmin, mas sem codificar coisas como o elemento ou o CSS aplicado a ele.

Eu só estou usando jQuery para adicionar / remover classe, se você não quiser usar jquery, você só precisa de um substituto para 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;
}

Para fazer a borda piscar, você pode fazer isso:

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

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

Isso fará com que a borda fique vermelha por 1 segundo e remova-a novamente.