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 Input Datetime autofocus Property
The HTML DOM Input Datetime autofocus property sets or returns whether a datetime input field should automatically receive focus when the page loads. This property corresponds to the autofocus attribute in HTML.
Syntax
Following is the syntax for getting the autofocus property value −
inputDatetimeObject.autofocus
Following is the syntax for setting the autofocus property −
inputDatetimeObject.autofocus = booleanValue
Return Value
The property returns a boolean value indicating whether the datetime input has autofocus enabled −
| Value | Description |
|---|---|
| true | The input field will automatically receive focus when the page loads |
| false | The input field will not automatically receive focus (default behavior) |
Example − Getting Autofocus Property
Following example demonstrates how to check if a datetime input has autofocus enabled −
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Autofocus - Get Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Check Datetime Autofocus Property</h2>
<p>Date & Time: <input type="datetime-local" id="myDatetime" autofocus></p>
<button onclick="checkAutofocus()">Check Autofocus</button>
<p id="result"></p>
<script>
function checkAutofocus() {
var datetimeInput = document.getElementById("myDatetime");
var result = document.getElementById("result");
result.innerHTML = "Autofocus property: " + datetimeInput.autofocus;
}
</script>
</body>
</html>
The output shows the current autofocus status when the button is clicked −
Autofocus property: true
Example − Setting Autofocus Property
Following example shows how to dynamically enable or disable the autofocus property −
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Autofocus - Set Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Control Datetime Autofocus</h2>
<p>Date & Time: <input type="datetime-local" id="controlDatetime" value="2024-01-15T10:30" autofocus></p>
<button onclick="enableAutofocus()">Enable Autofocus</button>
<button onclick="disableAutofocus()">Disable Autofocus</button>
<button onclick="showStatus()">Show Status</button>
<p id="status">Current status: Autofocus enabled</p>
<script>
var datetimeInput = document.getElementById("controlDatetime");
var statusDisplay = document.getElementById("status");
function enableAutofocus() {
datetimeInput.autofocus = true;
statusDisplay.innerHTML = "Current status: Autofocus enabled";
}
function disableAutofocus() {
datetimeInput.autofocus = false;
statusDisplay.innerHTML = "Current status: Autofocus disabled";
}
function showStatus() {
statusDisplay.innerHTML = "Current status: Autofocus " +
(datetimeInput.autofocus ? "enabled" : "disabled");
}
</script>
</body>
</html>
The buttons allow you to toggle the autofocus property and see the current status −
Current status: Autofocus enabled (Status updates based on button clicks)
Example − Multiple Datetime Inputs
Following example demonstrates managing autofocus across multiple datetime input fields −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Datetime Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Multiple Datetime Fields</h2>
<p>Start Date: <input type="datetime-local" id="startDate" autofocus></p>
<p>End Date: <input type="datetime-local" id="endDate"></p>
<button onclick="switchFocus()">Switch Autofocus</button>
<button onclick="checkAllFocus()">Check All Autofocus</button>
<div id="focusInfo"></div>
<script>
function switchFocus() {
var startInput = document.getElementById("startDate");
var endInput = document.getElementById("endDate");
if (startInput.autofocus) {
startInput.autofocus = false;
endInput.autofocus = true;
} else {
startInput.autofocus = true;
endInput.autofocus = false;
}
checkAllFocus();
}
function checkAllFocus() {
var startInput = document.getElementById("startDate");
var endInput = document.getElementById("endDate");
var info = document.getElementById("focusInfo");
info.innerHTML = "<p>Start Date autofocus: " + startInput.autofocus + "</p>" +
"<p>End Date autofocus: " + endInput.autofocus + "</p>";
}
// Show initial status
checkAllFocus();
</script>
</body>
</html>
This example shows how only one input field should have autofocus enabled at a time −
Start Date autofocus: true End Date autofocus: false (Values toggle when "Switch Autofocus" is clicked)
Browser Compatibility
The autofocus property is supported in all modern browsers. However, note that the datetime input type has been deprecated in favor of datetime-local. The autofocus property works consistently across both types.
Key Points
Only one element on a page should have autofocus enabled to avoid conflicts
The autofocus property can be changed dynamically using JavaScript
Setting autofocus to
trueadds the HTMLautofocusattribute; setting it tofalseremoves itThe property returns a boolean value, not a string
Conclusion
The HTML DOM Input Datetime autofocus property provides a way to control which datetime input field receives focus automatically when a page loads. This property can be both read and modified using JavaScript, making it useful for creating dynamic and user-friendly forms with proper focus management.
190 Views
