Is it possible to focus on a <div> using javascript focus() function?

Question

Is it possible to focus on a <div> using javascript focus() function?

I have a <div> tag

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

I am trying to focus on the above <div> using :

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

But it doesn't work. could someone suggest something....?

Answer 1

Yes - this is possible. In order to do it, you need to assign a tabindex...

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

A tabindex of 0 will put the tag "in the natural tab order of the page". A higher number will give it a specific order of priority, where 1 will be the first, 2 second and so on.

You can also give a tabindex of -1, which will make the div only focus-able by script, not the user.

Answer 2

To make the border flash you can do this:

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

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

This will make the border solid red for 1 second then remove it again.

Answer 3

window.location.hash = '#tries';

This will scroll to the element in question, essentially "focus"ing it.

Answer 4

Yes. it posiible. it will fires onFocus handler