Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM activeElement Property
The HTML DOM activeElement property is a read-only property that returns the currently focused element in the document. This property is useful for tracking user interaction and determining which element has keyboard focus at any given time.
When no specific element has focus, the activeElement property typically returns the <body> element or the <html> element, depending on the browser.
Syntax
Following is the syntax for the activeElement property −
document.activeElement
Return Value
The activeElement property returns an Element object representing the currently focused element in the document. If no element has focus, it returns the document's body element.
Example − Getting Active Element Tag Name
Following example demonstrates how to get the tag name of the currently active element −
<!DOCTYPE html>
<html>
<head>
<title>DOM activeElement Property</title>
</head>
<body onclick="display()" style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Click on any element to see the active element</h2>
<p>Click anywhere on this page to get the active element tag name.</p>
<input type="text" placeholder="Click here to focus">
<button>Click me</button>
<textarea placeholder="Or click here"></textarea>
<p id="result"></p>
<script>
function display() {
var activeTag = document.activeElement.tagName;
document.getElementById("result").innerHTML = "Active element: <strong>" + activeTag + "</strong>";
}
</script>
</body>
</html>
The output shows the tag name of whichever element you click or focus on −
Initially: Active element: BODY After clicking input: Active element: INPUT After clicking button: Active element: BUTTON After clicking textarea: Active element: TEXTAREA
Example − Getting Active Element Details
Following example shows how to get more detailed information about the active element −
<!DOCTYPE html>
<html>
<head>
<title>Active Element Details</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Active Element Information</h2>
<input type="text" id="username" placeholder="Enter username">
<input type="password" id="password" placeholder="Enter password">
<button id="submitBtn">Submit</button>
<button onclick="showActiveElement()">Show Active Element</button>
<div id="info" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function showActiveElement() {
var active = document.activeElement;
var info = "Tag Name: " + active.tagName + "<br>";
info += "ID: " + (active.id || "No ID") + "<br>";
info += "Type: " + (active.type || "No type attribute") + "<br>";
info += "Placeholder: " + (active.placeholder || "No placeholder");
document.getElementById("info").innerHTML = info;
}
</script>
</body>
</html>
This example provides detailed information about the currently focused element including its tag name, ID, type, and placeholder text.
Example − Focus Tracking
Following example demonstrates real-time tracking of focus changes −
<!DOCTYPE html>
<html>
<head>
<title>Focus Tracking</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Focus Tracking Example</h2>
<p>Tab through or click on the elements below:</p>
<input type="text" placeholder="First input">
<input type="email" placeholder="Email input">
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
<button>Button 1</button>
<button>Button 2</button>
<p id="tracker" style="color: blue; font-weight: bold;">Focus: BODY</p>
<script>
document.addEventListener('focusin', function() {
var active = document.activeElement;
var displayText = active.tagName;
if (active.type) displayText += " (" + active.type + ")";
if (active.placeholder) displayText += " - " + active.placeholder;
document.getElementById("tracker").textContent = "Focus: " + displayText;
});
</script>
</body>
</html>
The tracker automatically updates to show which element currently has focus as you navigate through the form elements.
Common Use Cases
The activeElement property is commonly used for −
Form validation − Checking which field is currently focused before showing validation messages.
Keyboard navigation − Building custom keyboard shortcuts or navigation systems.
Accessibility − Ensuring proper focus management for screen readers and assistive technologies.
User experience − Highlighting active sections or providing contextual help based on the focused element.
Browser Compatibility
The activeElement property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 4+. It is part of the DOM Level 2 HTML specification and has excellent cross-browser compatibility.
Conclusion
The HTML DOM activeElement property provides a simple way to identify the currently focused element in a document. It is essential for creating interactive web applications, managing focus states, and building accessible user interfaces that respond appropriately to user navigation patterns.
241 Views
