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 Time autofocus Property
The HTML DOM Input Time autofocus property sets or returns whether a time input field should automatically get focus when the page loads. When set to true, the time input will be focused immediately upon page load, allowing users to start typing without clicking on the field first.
Syntax
Following is the syntax for getting the autofocus property value −
inputTimeObject.autofocus
Following is the syntax for setting the autofocus property −
inputTimeObject.autofocus = booleanValue
Return Value
The autofocus property returns a boolean value indicating whether the time input has autofocus enabled or not.
Boolean Values
Here, "booleanValue" can be the following −
| booleanValue | Details |
|---|---|
| true | The input will be autofocused on initial page load. |
| false | It is the default value and input is not autofocused. |
Getting the Autofocus Property
Following example demonstrates how to check if a time input has autofocus enabled −
<!DOCTYPE html>
<html>
<head>
<title>Get Input Time Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Time Input Autofocus</h2>
<label for="timeInput">Meeting Time: </label>
<input type="time" id="timeInput" value="14:30" autofocus>
<br><br>
<button onclick="checkAutofocus()">Check Autofocus Status</button>
<p id="result"></p>
<script>
function checkAutofocus() {
var timeInput = document.getElementById("timeInput");
var result = document.getElementById("result");
result.innerHTML = "Autofocus is: " + timeInput.autofocus;
}
</script>
</body>
</html>
The output shows the autofocus status when the button is clicked −
Meeting Time: [14:30] (focused with blue outline) [Check Autofocus Status] Autofocus is: true
Setting the Autofocus Property
Following example demonstrates how to dynamically enable or disable autofocus on a time input −
<!DOCTYPE html>
<html>
<head>
<title>Set Input Time Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Control Time Input Autofocus</h2>
<label for="examTime">Exam Time: </label>
<input type="time" id="examTime" value="10:00" autofocus>
<br><br>
<button onclick="toggleAutofocus()">Toggle Autofocus</button>
<button onclick="displayStatus()">Show Status</button>
<p id="status">Current autofocus: true</p>
<script>
var timeInput = document.getElementById("examTime");
var statusDisplay = document.getElementById("status");
function toggleAutofocus() {
timeInput.autofocus = !timeInput.autofocus;
displayStatus();
}
function displayStatus() {
statusDisplay.innerHTML = "Current autofocus: " + timeInput.autofocus;
}
</script>
</body>
</html>
The output shows how the autofocus property can be toggled −
Exam Time: [10:00] [Toggle Autofocus] [Show Status] Current autofocus: false (after clicking toggle)
Complete Example
Following example shows a comprehensive demonstration of the autofocus property with multiple time inputs −
<!DOCTYPE html>
<html>
<head>
<title>Input Time Autofocus Property</title>
<style>
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
.time-group {
margin: 15px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
input[type="time"] {
padding: 5px;
margin: 5px;
font-size: 16px;
}
button {
background: #007bff;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="container">
<h2>Time Input Autofocus Demo</h2>
<div class="time-group">
<label for="startTime">Start Time: </label>
<input type="time" id="startTime" value="09:00" autofocus>
<span id="startStatus">Autofocus: true</span>
</div>
<div class="time-group">
<label for="endTime">End Time: </label>
<input type="time" id="endTime" value="17:00">
<span id="endStatus">Autofocus: false</span>
</div>
<button onclick="removeAllAutofocus()">Remove All Autofocus</button>
<button onclick="setAutofocusToEnd()">Set Autofocus to End Time</button>
<button onclick="updateStatus()">Update Status</button>
</div>
<script>
var startTime = document.getElementById("startTime");
var endTime = document.getElementById("endTime");
var startStatus = document.getElementById("startStatus");
var endStatus = document.getElementById("endStatus");
function removeAllAutofocus() {
startTime.autofocus = false;
endTime.autofocus = false;
updateStatus();
}
function setAutofocusToEnd() {
startTime.autofocus = false;
endTime.autofocus = true;
updateStatus();
}
function updateStatus() {
startStatus.innerHTML = "Autofocus: " + startTime.autofocus;
endStatus.innerHTML = "Autofocus: " + endTime.autofocus;
}
</script>
</body>
</html>
The output demonstrates multiple time inputs with different autofocus settings and the ability to control them dynamically −
Time Input Autofocus Demo Start Time: [09:00] (focused) Autofocus: true End Time: [17:00] Autofocus: false [Remove All Autofocus] [Set Autofocus to End Time] [Update Status]
Key Points
-
The autofocus property only affects the initial page load behavior. Changing it via JavaScript does not immediately move focus to the element.
-
Only one element per page should have autofocus enabled to avoid conflicts.
-
The autofocus property corresponds to the HTML
autofocusattribute. -
This property is supported in all modern browsers that support the HTML5 time input type.
Conclusion
The HTML DOM Input Time autofocus property provides control over whether a time input field receives focus when the page loads. It returns a boolean value and can be dynamically modified using JavaScript, making it useful for creating user-friendly forms with proper focus management.
158 Views
