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 Month autofocus Property
The HTML DOM Input Month autofocus Property controls whether a month input field should automatically receive focus when the page loads. This property returns a boolean value indicating the current autofocus state and allows you to programmatically enable or disable the autofocus behavior.
Syntax
Following is the syntax to return the autofocus property −
object.autofocus
Following is the syntax to set the autofocus property −
object.autofocus = true | false
Parameters
The autofocus property accepts the following boolean values −
true − The month input field will automatically get focus when the page loads.
false − The month input field will not automatically get focus when the page loads (default behavior).
Return Value
The property returns a boolean value indicating whether the month input field has autofocus enabled (true) or disabled (false).
Example − Getting Autofocus Status
Following example demonstrates how to check if autofocus is enabled on a month input field −
<!DOCTYPE html>
<html>
<head>
<title>Check Month Input Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Month Input Autofocus Status</h2>
<input type="month" id="monthInput" autofocus value="2024-01">
<br><br>
<button onclick="checkAutofocus()">Check Autofocus</button>
<p id="result"></p>
<script>
function checkAutofocus() {
var monthInput = document.getElementById("monthInput");
var isAutofocus = monthInput.autofocus;
document.getElementById("result").innerHTML = "Autofocus enabled: " + isAutofocus;
}
</script>
</body>
</html>
The output shows whether autofocus is enabled on the month input field −
Month Input Autofocus Status [2024-01] (focused month input) [Check Autofocus] Autofocus enabled: true
Example − Enabling and Disabling Autofocus
Following example shows how to dynamically enable and disable autofocus on a month input field −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Month Input Autofocus</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
input[type="month"] {
padding: 8px;
font-size: 16px;
margin: 10px;
}
button {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 5px;
}
button:hover {
background-color: #0056b3;
}
#status {
margin-top: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Month Input Autofocus Control</h2>
<p>The month input field below has autofocus enabled by default.</p>
<input type="month" id="monthField" autofocus value="2024-03">
<br>
<button onclick="enableAutofocus()">Enable Autofocus</button>
<button onclick="disableAutofocus()">Disable Autofocus</button>
<button onclick="checkStatus()">Check Status</button>
<div id="status"></div>
<script>
function enableAutofocus() {
document.getElementById("monthField").autofocus = true;
document.getElementById("status").innerHTML = "Autofocus enabled!";
document.getElementById("status").style.color = "green";
}
function disableAutofocus() {
document.getElementById("monthField").autofocus = false;
document.getElementById("status").innerHTML = "Autofocus disabled!";
document.getElementById("status").style.color = "red";
}
function checkStatus() {
var isEnabled = document.getElementById("monthField").autofocus;
document.getElementById("status").innerHTML = "Autofocus is currently: " + (isEnabled ? "ENABLED" : "DISABLED");
document.getElementById("status").style.color = isEnabled ? "green" : "red";
}
</script>
</body>
</html>
The output allows you to control the autofocus behavior dynamically −
Month Input Autofocus Control The month input field below has autofocus enabled by default. [2024-03] (month input field) [Enable Autofocus] [Disable Autofocus] [Check Status] Autofocus is currently: ENABLED
Example − Multiple Month Inputs
Following example demonstrates managing autofocus across multiple month input fields −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Month Inputs Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Date Selection</h2>
<label for="startMonth">Start Month:</label>
<input type="month" id="startMonth" autofocus value="2024-01">
<br><br>
<label for="endMonth">End Month:</label>
<input type="month" id="endMonth" value="2024-12">
<br><br>
<button onclick="switchFocus()">Switch Focus to End Month</button>
<button onclick="removeFocus()">Remove All Autofocus</button>
<br><br>
<div id="info"></div>
<script>
function switchFocus() {
document.getElementById("startMonth").autofocus = false;
document.getElementById("endMonth").autofocus = true;
document.getElementById("endMonth").focus();
document.getElementById("info").innerHTML = "Focus switched to End Month input";
}
function removeFocus() {
document.getElementById("startMonth").autofocus = false;
document.getElementById("endMonth").autofocus = false;
document.getElementById("info").innerHTML = "Autofocus removed from both inputs";
}
</script>
</body>
</html>
This example shows how to manage focus between multiple month input fields programmatically.
Key Points
Only one element per page should have autofocus enabled to avoid confusion.
The autofocus property affects only the initial page load behavior, not subsequent focus events.
Changing the autofocus property value does not immediately focus or blur the element.
To actually focus an element after changing the property, use the
focus()method.The autofocus HTML attribute is boolean, but the DOM property returns
trueorfalse.
Browser Compatibility
The Input Month autofocus property is supported in all modern browsers that support the <input type="month"> element, including Chrome, Firefox, Safari, and Edge. However, the month input type itself has limited support in some older browsers.
Conclusion
The HTML DOM Input Month autofocus property provides a simple way to control automatic focus behavior for month input fields. It returns a boolean value indicating the current autofocus state and allows you to programmatically enable or disable this feature, making it useful for creating dynamic and user-friendly forms.
149 Views
