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....?
This question is related to
javascript
focus
window.location.hash = '#tries';
This will scroll to the element in question, essentially "focus"ing it.
You can use tabindex
<div tabindex="-1" id="tries"></div>
The tabindex value can allow for some interesting behaviour.
I wanted to suggest something like Michael Shimmin's but without hardcoding things like the element, or the CSS that is applied to it.
I'm only using jQuery for add/remove class, if you don't want to use jquery, you just need a replacement for 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;
}
document.getElementById('test').onclick = function () {_x000D_
document.getElementById('scripted').focus();_x000D_
};
_x000D_
div:focus {_x000D_
background-color: Aqua;_x000D_
}
_x000D_
<div>Element X (not focusable)</div>_x000D_
<div tabindex="0">Element Y (user or script focusable)</div>_x000D_
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>_x000D_
<div id="test">Set Focus To Element Z</div>
_x000D_
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.
<div id="inner" tabindex="0">
this div can now have focus and receive keyboard events
</div>
document.getElementById('tries').scrollIntoView()
works. This works better than window.location.hash
when you have fixed positioning.
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.
document.getElementById('test').onclick = function () {_x000D_
document.getElementById('scripted').focus();_x000D_
};
_x000D_
div:focus {_x000D_
background-color: Aqua;_x000D_
}
_x000D_
<div>Element X (not focusable)</div>_x000D_
<div tabindex="0">Element Y (user or script focusable)</div>_x000D_
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>_x000D_
<div id="test">Set Focus To Element Z</div>
_x000D_
Obviously, it is a shame to have an element you can focus by script that you can't focus by other input method (especially if a user is keyboard only or similarly constrained). There are also a whole bunch of standard elements that are focusable by default and have semantic information baked in to assist users. Use this knowledge wisely.
Source: Stackoverflow.com