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 Date autofocus Property
The HTML DOM Input Date autofocus property sets or returns whether a date input field should automatically receive focus when the page loads. This property corresponds to the autofocus HTML attribute.
Syntax
Following is the syntax for getting the autofocus property −
inputDateObject.autofocus
Following is the syntax for setting the autofocus property −
inputDateObject.autofocus = booleanValue
Return Value
The autofocus property returns a boolean value −
true − If the date input has the autofocus attribute set
false − If the date input does not have the autofocus attribute (default)
Parameters
The autofocus property accepts the following parameter −
| Parameter | Description |
|---|---|
| booleanValue | A boolean value that specifies whether the date input should be focused on page load. true enables autofocus, false disables it. |
Example − Getting Autofocus Property
Following example demonstrates how to check if a date input has autofocus enabled −
<!DOCTYPE html>
<html>
<head>
<title>Input Date Autofocus - Get Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Date Input with Autofocus</h3>
<label for="birthdate">Select your birthdate:</label>
<input type="date" id="birthdate" autofocus>
<br><br>
<button onclick="checkAutofocus()">Check Autofocus Status</button>
<p id="result"></p>
<script>
function checkAutofocus() {
var dateInput = document.getElementById("birthdate");
var hasAutofocus = dateInput.autofocus;
document.getElementById("result").innerHTML =
"Autofocus property: " + hasAutofocus;
}
</script>
</body>
</html>
When the page loads, the date input automatically receives focus. Clicking the button displays the autofocus status −
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 Date Autofocus - Set Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Toggle Date Input Autofocus</h3>
<label for="eventdate">Event Date:</label>
<input type="date" id="eventdate">
<br><br>
<button onclick="enableAutofocus()">Enable Autofocus</button>
<button onclick="disableAutofocus()">Disable Autofocus</button>
<button onclick="showStatus()">Show Status</button>
<p id="status">Current autofocus status: false</p>
<script>
var dateInput = document.getElementById("eventdate");
var statusElement = document.getElementById("status");
function enableAutofocus() {
dateInput.autofocus = true;
statusElement.innerHTML = "Autofocus enabled: " + dateInput.autofocus;
}
function disableAutofocus() {
dateInput.autofocus = false;
statusElement.innerHTML = "Autofocus disabled: " + dateInput.autofocus;
}
function showStatus() {
statusElement.innerHTML = "Current autofocus status: " + dateInput.autofocus;
}
</script>
</body>
</html>
The buttons allow you to toggle the autofocus property and see its current state. Note that changing the autofocus property after page load does not affect the current focus state −
Current autofocus status: false (After enabling: Autofocus enabled: true)
Example − Multiple Date Inputs
Following example demonstrates autofocus behavior with multiple date input fields −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Date Inputs - Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Event Planning Form</h3>
<form>
<label for="startdate">Start Date:</label>
<input type="date" id="startdate">
<br><br>
<label for="enddate">End Date:</label>
<input type="date" id="enddate" autofocus>
<br><br>
<label for="deadline">Deadline:</label>
<input type="date" id="deadline">
<br><br>
</form>
<button onclick="checkAllAutofocus()">Check All Autofocus</button>
<div id="results"></div>
<script>
function checkAllAutofocus() {
var inputs = ["startdate", "enddate", "deadline"];
var results = document.getElementById("results");
var output = "<h4>Autofocus Status:</h4>";
inputs.forEach(function(id) {
var input = document.getElementById(id);
output += "<p>" + id + ": " + input.autofocus + "</p>";
});
results.innerHTML = output;
}
</script>
</body>
</html>
Only the "End Date" field has autofocus enabled, so it receives focus when the page loads. The button shows the autofocus status of all date inputs −
Autofocus Status: startdate: false enddate: true deadline: false
Key Points
Only one element per document should have the
autofocusattribute set to avoid conflicts.The autofocus property reflects the HTML
autofocusattribute but changing it via JavaScript after page load does not affect the current focus state.Autofocus works automatically when the page loads, but not when the property is set dynamically.
The property is useful for forms where you want users to immediately start entering a date without clicking on the input first.
Browser Compatibility
The autofocus property is supported in all modern browsers that support the HTML5 date input type. This includes Chrome, Firefox, Safari, Edge, and Opera. Internet Explorer does not support the date input type.
Conclusion
The HTML DOM Input Date autofocus property provides a convenient way to automatically focus a date input field when a page loads, improving user experience by eliminating the need for users to manually click on the input. It can be both read and modified using JavaScript, though dynamic changes only affect the attribute value, not the actual focus behavior.
207 Views
