How Can I Determine and Manage Focus in JavaScript?

Focus Tracking in JavaScript

In JavaScript, the ability to determine which DOM element currently holds the focus is crucial for various applications, such as navigation and accessibility.

Finding the focused element can be achieved using the document.activeElement property. This property is natively supported in all major browsers.

For example, the following code snippet utilizes document.activeElement:

console.log(document.activeElement.id); // Outputs the ID of the focused element

The document.activeElement property returns the focus to the body element. To explicitly remove focus, you can utilize the blur method:

document.activeElement.blur();

In older browsers, detecting the focused form field required a different approach. You could utilize the "focus" event handler for each field, recording the last-focused one in a variable. Additionally, a "blur" handler could be used to clear the variable when the focus left the last-focused field.

For more information, refer to the following resources:

• [ActiveElement Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement#Browser_compatibility)
• [jQuery Alternative for document.activeElement](https://stackoverflow.com/questions/7755792/jquery-alternative-for-document-activeelement)

The above is the detailed content of How Can I Determine and Manage Focus in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!