Czy możliwe jest skupienie się na funkcji JavaScript focus ()?

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

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

Tabindex o wartości 0 spowoduje dodanie tagu "w naturalnej kolejności kart na stronie". Wyższa liczba da jej konkretną kolejność priorytetów, gdzie 1 będzie pierwszym, 2 drugim i tak dalej.

Możesz również podać tabindex równy -1, co sprawi, że div będzie mógł skupić się tylko na skrypcie, a nie na użytkowniku.

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, szkoda mieć element, który można focus by script that you can ' t focus by other input method (especially if a user is keyboard only or similar consisted). Istnieje również cała masa standardowych elementów, które są domyślnie ustawialne i mają informacje semantyczne wypiekane, aby pomóc użytkownikom. Wykorzystaj tę wiedzę mądrze.

document.getElementById('tries').scrollIntoView() działa. To działa lepiej niż window.location.hash, gdy masz stałe pozycjonowanie.

Możesz użyć tabindex

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

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

• Jeśli podano wartość "-1", element nie może być tabulowany, ale focus może być podana do elementu programowo(za pomocą elementu.focus ()).
• Jeśli podano wartość 0, element może być skupiony za pomocą klawiatury i wpada do przepływu tabulacji dokumentu. Wartości większe niż 0 Utwórz poziom priorytetu, a 1 jest najważniejszy.

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

Chciałem zasugerować coś takiego jak Michael Shimmin, ale bez hardcodingu, takich jak element lub CSS, który jest do niego stosowany.

Używam tylko jQuery dla klasy add/remove, 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;
}

Spowoduje to również przewinięcie przeglądarki do elementu coresponding o id

var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;

target.parentNode.scrollTop może być zastąpiony przez window.scrollTop, jeśli chcesz przewijać całe okno

Aby migać obramowanie 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 obramowanie stanie się czerwone przez 1 sekundę, a następnie usunie je ponownie.