Is it possible to focus on a using JavaScript focus() function?

Answer 1

window.location.hash = '#tries';

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

Answer 2

document.getElementById('tries').scrollIntoView() works. This works better than window.location.hash when you have fixed positioning.

Answer 3

You can use tabindex

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

The tabindex value can allow for some interesting behaviour.

• If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()).
• If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document. Values greater than 0 create a priority level with 1 being the most important.

Answer 4

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

Answer 5

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;
}

Answer 6

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>