Introduction
In JavaScript, the focus() technique is a frontend software that permits us to set the deal with a selected aspect within the DOM. Nonetheless, there are occasions when this technique doesn’t appear to work as anticipated.
This quick Byte will information you thru some frequent points and “gotchas” which may trigger the focus() technique to fail and supply options.
Examine your Dev Instruments
Step one in troubleshooting a focus() problem is to examine your browser’s Dev Instruments Console. Right here, it is best to have the ability to discover any error messages associated to your code. To open the console in most browsers, you need to use the Ctrl+Shift+J (Home windows/Linux) or Cmd+Decide+J (Mac) keyboard shortcuts.
doc.getElementById('nonexistent').focus();
If the aspect does not exist, you will see an error like this:
Uncaught TypeError: Can not learn property 'focus' of null
This error tells us that your JavaScript is making an attempt to deal with a component that does not exist within the DOM.
Understanding Focusable Components in JavaScript
Be aware: Not all components in JavaScript can obtain focus. Solely sure components, generally known as ‘focusable’ components, may be be the topic of focus.
The checklist of focusable components consists of <button>, <enter>, <choose>, <textarea>, <a> with href or tabindex, and some other aspect with the tabindex property. If you happen to’re making an attempt to deal with a component that’s not focusable, the focus() technique is not going to work.
doc.getElementById('div').focus();
If the div aspect does not have a tabindex attribute, the main target technique will not work.
Guarantee Visibility of Goal Components
One other frequent problem which may stop the focus() technique from working is the visibility of the goal aspect. The goal aspect have to be seen (i.e., not hidden with CSS) and within the present viewport.
Be aware: A component hidden with CSS (show: none or visibility: hidden) or positioned exterior of the viewport can’t obtain focus.
doc.getElementById('hiddenElement').focus();
If the aspect is hidden, the focus() technique is not going to work.
Examine if Focusable
Given what we have realized to date, we may create a operate that helps us examine if a component is focusable. This might be useful if you do not know beforehand what aspect we’re making an attempt to deal with. The operate may appear to be this:
operate isFocusable($elem) {
if ($elem.is(":hidden") || $elem.is(":disabled")) {
return false;
}
var tabIndex = +$elem.attr("tabindex");
tabIndex = isNaN(tabIndex) ? -1 : tabIndex;
return $elem.is(":enter, a[href], space[href], iframe") || tabIndex > -1;
}
The operate above was tailored from this SO reply.
Conclusion
The focus() technique in JavaScript is a useful software for guiding consumer interplay, however it could actually generally fail on account of points like non-existent or non-focusable components, or visibility points. By checking your Dev Instruments Console Tab for errors, understanding which components can obtain focus, and guaranteeing your goal components are seen and inside the viewport, you may remedy most points with the focus() technique not working as anticipated.
