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

by

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 () {
    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>

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.

More Related Contents:

  1. Is there a way to detect if a browser window is not currently active?
  2. How can I set focus on an element in an HTML form using JavaScript?
  3. Mobile Safari Autofocus text field
  4. Mobile Safari: Javascript focus() method on inputfield only works with click?
  5. How to detect when a tab is focused or not in Chrome with Javascript?
  6. How to change browser focus from one tab to another
  7. Programmatically focus on next input field in mobile safari
  8. How do you clear the focus in javascript?
  9. How to focus on a form input text field on page load using jQuery?
  10. Can multiple HTML elements receive focus at the same time?
  11. Detect which form input has focus using JavaScript or jQuery
  12. CSS: Change parent on focus of child
  13. focus() not working in safari or chrome
  14. How to scroll to an element in jQuery?
  15. Twitter bootstrap – Focus on textarea inside a modal on click
  16. How to focus an input field on Android browser through javascript or jquery
  17. how do an infinite loop in javascript
  18. When should I use a return statement in ES6 arrow functions
  19. Evaluating a string as a mathematical expression in JavaScript
  20. Find mouse position relative to element
  21. Dropdownlist width in IE
  22. Official information on `arguments` in ES6 Arrow functions?
  23. Defining read-only properties in JavaScript
  24. Take elements while a condition evaluates to true (extending ElementArrayFinder)
  25. Why does Node.js’ fs.readFile() return a buffer instead of string?
  26. What are “decorators” and how are they used?
  27. Change HTML form ‘input’ type by JavaScript
  28. How to window.scrollTo() with a smooth effect
  29. Can I prevent phone from sleep on a webpage
  30. Javascript – Precedence in hoisting

Leave a Comment