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 Week autofocus Property
The Input Week autofocus property in the HTML DOM sets or returns whether an input field of type "week" should automatically receive focus when the page loads. This property corresponds to the HTML autofocus attribute and is useful for improving user experience by immediately directing attention to the week input field.
Syntax
Following is the syntax for getting the autofocus property −
inputWeekObject.autofocus
Following is the syntax for setting the autofocus property −
inputWeekObject.autofocus = booleanValue
Property Values
The autofocus property accepts boolean values −
| Value | Description |
|---|---|
| true | The input week field will automatically receive focus when the page loads. |
| false | Default value. The input week field will not automatically receive focus. |
Return Value
The property returns a Boolean value indicating whether the input week field has autofocus enabled (true) or disabled (false).
Example - Getting Autofocus Property
Following example demonstrates how to check if an input week field has autofocus enabled −
<!DOCTYPE html>
<html>
<head>
<title>Input Week Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Week Input Autofocus</h2>
<form>
<label for="weekInput">Select Week: </label>
<input type="week" id="weekInput" value="2024-W15" autofocus>
<button type="button" onclick="checkAutofocus()">Check Autofocus</button>
</form>
<p id="result"></p>
<script>
function checkAutofocus() {
var weekInput = document.getElementById("weekInput");
var isAutofocus = weekInput.autofocus;
document.getElementById("result").innerHTML = "Autofocus enabled: " + isAutofocus;
}
</script>
</body>
</html>
The output shows whether autofocus is enabled for the week input field −
Autofocus enabled: true
Example - Setting Autofocus Property
Following example shows how to dynamically enable or disable autofocus on a week input field −
<!DOCTYPE html>
<html>
<head>
<title>Set Week Input Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Control Week Input Autofocus</h2>
<form>
<label for="targetWeek">Target Week: </label>
<input type="week" id="targetWeek" value="2024-W20">
<br><br>
<button type="button" onclick="enableAutofocus()">Enable Autofocus</button>
<button type="button" onclick="disableAutofocus()">Disable Autofocus</button>
<button type="button" onclick="checkStatus()">Check Status</button>
</form>
<p id="status">Current autofocus: false</p>
<script>
var weekInput = document.getElementById("targetWeek");
var statusDisplay = document.getElementById("status");
function enableAutofocus() {
weekInput.autofocus = true;
statusDisplay.innerHTML = "Current autofocus: " + weekInput.autofocus;
}
function disableAutofocus() {
weekInput.autofocus = false;
statusDisplay.innerHTML = "Current autofocus: " + weekInput.autofocus;
}
function checkStatus() {
statusDisplay.innerHTML = "Current autofocus: " + weekInput.autofocus;
}
</script>
</body>
</html>
The buttons allow you to dynamically control the autofocus property and see the current status −
Current autofocus: true (after clicking Enable Autofocus) Current autofocus: false (after clicking Disable Autofocus)
Example - Practical Use Case
Following example demonstrates a practical scenario where autofocus helps users quickly select a week for scheduling −
<!DOCTYPE html>
<html>
<head>
<title>Week Scheduler with Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5;">
<div style="background: white; padding: 20px; border-radius: 8px; max-width: 500px;">
<h2 style="color: #333;">Weekly Schedule Planner</h2>
<form>
<fieldset style="border: 1px solid #ddd; padding: 15px; border-radius: 5px;">
<legend>Select Planning Week</legend>
<label for="planningWeek">Choose Week: </label>
<input type="week" id="planningWeek" value="2024-W25" autofocus style="margin: 10px 0;">
<br>
<button type="button" onclick="toggleAutofocus()">Toggle Autofocus</button>
<button type="button" onclick="resetWeek()">Reset to Current Week</button>
</fieldset>
<div id="info" style="margin-top: 15px; padding: 10px; background: #e8f4f8; border-radius: 4px;">
Autofocus Status: enabled
</div>
</form>
</div>
<script>
var planningInput = document.getElementById("planningWeek");
var infoDiv = document.getElementById("info");
function toggleAutofocus() {
planningInput.autofocus = !planningInput.autofocus;
infoDiv.innerHTML = "Autofocus Status: " + (planningInput.autofocus ? "enabled" : "disabled");
}
function resetWeek() {
var today = new Date();
var year = today.getFullYear();
var week = getWeekNumber(today);
planningInput.value = year + "-W" + (week < 10 ? "0" + week : week);
}
function getWeekNumber(date) {
var d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
var dayNum = d.getUTCDay() || 7;
d.setUTCDate(d.getUTCDate() + 4 - dayNum);
var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
return Math.ceil((((d - yearStart) / 86400000) + 1)/7);
}
</script>
</body>
</html>
This example shows a practical week scheduler where autofocus helps users immediately interact with the week selection field.
Key Points
-
The autofocus property only takes effect when the page initially loads, not when dynamically changed via JavaScript.
-
Only one element per document should have autofocus enabled to avoid conflicts.
-
Setting
autofocus = truevia JavaScript does not automatically focus the element; it only sets the property value. -
The property reflects the state of the HTML
autofocusattribute on the input element. -
For accessibility, use autofocus sparingly as it can be disorienting for screen reader users.
Browser Compatibility
The Input Week autofocus property is supported in modern browsers that support the <input type="week"> element, including Chrome, Firefox, Safari, and Edge. Internet Explorer does not support the week input type.
Conclusion
The Input Week autofocus property provides a convenient way to automatically focus week input fields when a page loads, improving user experience in forms that require immediate week selection. Use it judiciously to enhance usability without compromising accessibility.
170 Views
