Чи можна зосередитись на <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';

Це буде прокручувати до елемента, про який йде мова, по суті "фокусуючи" його.

Так - це можливо. Для цього вам потрібно призначити табіндекс ...

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

У tabindex 0 буде розміщено тег "у порядку природного вкладки сторінки". Більше число надасть йому певного порядку пріоритету, де 1 буде першим, 2 другим тощо.

Ви також можете надати табіндекс -1, який зробить діва лише фокусируваним за сценарієм, а не користувачем.

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 випадку фіксованого позиціонування.

Можна використовувати табіндекс

<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 для класу add / delete, якщо ви не хочете використовувати 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 секунди, а потім видаліть його знову.