Можно ли сфокусироваться на <div> с помощью функции JavaScript focus ()?

Можно ли сосредоточиться на <div>использовании focus()функции JavaScript ?

У меня есть <div>тег

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

Я пытаюсь сосредоточиться на вышесказанном, <div>используя:

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

Но это не работает. Может ли кто-то предложить что-то ....?

window.location.hash = '#tries';

Это позволит перейти к рассматриваемому элементу, по сути, «сфокусировав» его.

Да, это возможно Для этого вам нужно назначить tabindex ...

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

Табличный индекс 0 будет помещать тег «в естественном порядке табуляции страницы». Более высокое число придаст ему определенный порядок приоритета, где 1 будет первым, 2 секунды и так далее.

Вы также можете задать tabindex -1, что сделает div доступным только для сценария, а не для пользователя.

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>

Очевидно, обидно иметь элемент, который вы можете сфокусировать с помощью скрипта, который вы не можете сфокусировать с помощью другого метода ввода (особенно, если у пользователя только клавиатура или аналогичные ограничения). Существует также целый ряд стандартных элементов, которые по умолчанию фокусируются и содержат семантическую информацию, помогающую пользователям. Используйте эти знания с умом.

document.getElementById('tries').scrollIntoView()работает. Это работает лучше, чем window.location.hash когда вы зафиксировали положение.

Вы можете использовать tabindex

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

Значение tabindex может привести к интересному поведению.

• Если задано значение «-1», элемент не может быть вставлен во вкладку, но фокус может быть дан элементу программно (используя element.focus ()).
• Если задано значение 0, элемент может быть сфокусирован через клавиатуру и попадает в поток вкладок документа. Значения больше 0 создают уровень приоритета, причем 1 является наиболее важным.

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

Я хотел предложить что-то вроде Майкла Шиммина, но без жесткого кодирования таких вещей, как элемент или CSS, который к нему применяется.

Я использую только jQuery для добавления / удаления класса, если вы не хотите использовать jquery, вам просто нужна замена для 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;
}

Чтобы сделать мигание границы, вы можете сделать это:

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

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

Это сделает границу сплошным красным на 1 секунду, а затем удалите ее снова