How to Focus on a `` Element Using JavaScript's `focus()` Function?

Ability to Focus on a

Using JavaScript's focus() Function

Original Question:

Is it feasible to focus on a

element by utilizing JavaScript's focus() function?

Additional Details:

I aim to target the following

element using focus():

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

However, invoking document.getElementById('tries').focus(); fails to accomplish this task. Can anyone provide guidance on resolving this issue?

Answer:

By assigning a tabindex attribute, you can attain the desired focus on a

tag.

Implementation:

<code class="html"><div tabindex="0">Hello World</div></code>

Setting tabindex to 0 integrates the tag into the page's inherent tab order, with 0 representing the first element in the sequence. Higher values indicate an order of precedence, wherein 1 is prioritized over 2 and so forth.

Alternatively, you can assign a tabindex of -1 to limit focus-ability to scripts, rendering the element inaccessible to user interaction.

Example:

<code class="javascript">document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};</code>

<code class="css">div:focus {
    background-color: Aqua;
}</code>

<code class="html"><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></code>

By incorporating these techniques, you can deftly manipulate the focus of your desired

elements, enabling seamless control over user interactions and accessibility.

The above is the detailed content of How to Focus on a `` Element Using JavaScript's `focus()` Function?. For more information, please follow other related articles on the PHP Chinese website!