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

Question

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

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

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

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

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

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

Answer 1

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

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

Tabindex, равный 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>

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

Answer 2

window.location.hash = '#tries';

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

Answer 3

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

Answer 4

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

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

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

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

Answer 5

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

Answer 6

Я хотел предложить что-то вроде Майкла Шиммина, но без жесткого кодирования таких вещей, как элемент или 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;
}

Answer 7

Попробуйте это -

$("html, body").stop().animate({ scrollTop: $("#inner").offset().top - 80 }, 1500, "easeInOutExpo"), e.preventDefault();

Answer 8

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

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

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

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