Czy można skupić się na <div> za pomocą funkcji JavaScript focus ()?

Czy można skupić się na funkcji <div>JavaScript focus()?

Mam <div>tag

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

Staram się skupić na powyższym, <div>używając:

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

Ale to nie działa. Czy ktoś może coś zasugerować ...?

window.location.hash = '#tries';

Spowoduje to przewinięcie do danego elementu, w zasadzie „skupienie” go.

Tak - jest to możliwe. Aby to zrobić, musisz przypisać tabindex ...

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

Tabindex 0 spowoduje umieszczenie tagu „w naturalnej kolejności tabulatorów strony”. Wyższa liczba da mu określoną kolejność pierwszeństwa, gdzie 1 będzie pierwszą, 2 sekundą i tak dalej.

Możesz także podać tabindex -1, co sprawi, że div będzie w stanie się skupić tylko przez skrypt, a nie użytkownika.

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>

Oczywiście wstydem jest mieć element, na którym można ustawić ostrość za pomocą skryptu, którego nie można ustawić za pomocą innej metody wprowadzania danych (szczególnie jeśli użytkownik jest ograniczony tylko przez klawiaturę). Istnieje również cała masa standardowych elementów, które domyślnie można ustawić i które zawierają informacje semantyczne, aby pomóc użytkownikom. Wykorzystaj tę wiedzę mądrze.

document.getElementById('tries').scrollIntoView()Pracuje. Działa to lepiej niż w window.location.hash przypadku stałego pozycjonowania.

Możesz użyć tabindex

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

Wartość tabindex może pozwolić na ciekawe zachowanie.

• Jeśli podano wartość „-1”, element nie może być tabulowany, ale można programowo nadać fokus elementowi (używając element.focus ()).
• Jeśli zostanie podana wartość 0, element może zostać zogniskowany za pomocą klawiatury i wpaść w klawisze dokumentu. Wartości większe od 0 tworzą poziom priorytetu, przy czym 1 jest najważniejszy.

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

Chciałem zasugerować coś podobnego do Michaela Shimmina, ale bez sztywnego kodowania takich rzeczy jak element lub zastosowany do niego CSS.

Używam tylko jQuery do dodawania / usuwania klasy, jeśli nie chcesz używać jquery, potrzebujesz tylko zamiennika dla 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;
}

Aby zrobić flashowanie na granicy, możesz to zrobić:

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

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

Spowoduje to, że ramka będzie świecić na czerwono przez 1 sekundę, a następnie usunie ją ponownie.