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 Text autofocus Property
The HTML DOM Input Text autofocus property is associated with the HTML <input> element's autofocus attribute. This property sets or returns whether the input text field should automatically receive focus when the page loads.
When an input field has autofocus enabled, the browser automatically places the cursor in that field as soon as the page finishes loading, allowing users to start typing immediately without clicking on the field first.
Syntax
Following is the syntax for setting the autofocus property −
textObject.autofocus = true|false
Following is the syntax for getting the autofocus property −
var focusState = textObject.autofocus;
Parameters
The autofocus property accepts the following boolean values −
true − The text field will automatically receive focus when the page loads.
false − The text field will not automatically receive focus. This is the default value.
Return Value
The autofocus property returns a boolean value indicating whether the input field has the autofocus attribute set or not.
Example − Checking Autofocus Status
Following example demonstrates how to check if an input field has autofocus enabled −
<!DOCTYPE html>
<html>
<head>
<title>Input Text Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Text Autofocus Property</h2>
<label for="username">USERNAME:</label>
<input type="text" id="username" autofocus placeholder="Enter username">
<br><br>
<button onclick="checkFocus()">CHECK FOCUS STATUS</button>
<p id="result"></p>
<script>
function checkFocus() {
var inputField = document.getElementById("username");
var hasFocus = inputField.autofocus;
document.getElementById("result").innerHTML =
"The text field has autofocus property set to: " + hasFocus;
}
</script>
</body>
</html>
The output shows the input field automatically focused on page load, and clicking the button displays the autofocus status −
USERNAME: [cursor automatically here] Enter username [CHECK FOCUS STATUS] After clicking: The text field has autofocus property set to: true
Example − Setting Autofocus Dynamically
Following example shows how to enable or disable autofocus property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Autofocus Control</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Autofocus Control</h2>
<label for="email">EMAIL:</label>
<input type="text" id="email" placeholder="Enter email address">
<br><br>
<button onclick="enableFocus()">ENABLE AUTOFOCUS</button>
<button onclick="disableFocus()">DISABLE AUTOFOCUS</button>
<button onclick="checkStatus()">CHECK STATUS</button>
<p id="status"></p>
<script>
function enableFocus() {
document.getElementById("email").autofocus = true;
document.getElementById("status").innerHTML = "Autofocus enabled!";
}
function disableFocus() {
document.getElementById("email").autofocus = false;
document.getElementById("status").innerHTML = "Autofocus disabled!";
}
function checkStatus() {
var isEnabled = document.getElementById("email").autofocus;
document.getElementById("status").innerHTML =
"Current autofocus status: " + isEnabled;
}
</script>
</body>
</html>
The output allows users to dynamically control the autofocus property and check its current state −
EMAIL: [Enter email address] [ENABLE AUTOFOCUS] [DISABLE AUTOFOCUS] [CHECK STATUS] Status messages appear here based on button clicks
Example − Multiple Input Fields
Following example demonstrates autofocus behavior with multiple input fields −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Input Fields</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form</h2>
<form>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" autofocus placeholder="Enter first name">
<br><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" placeholder="Enter last name">
<br><br>
<label for="phone">Phone:</label>
<input type="text" id="phone" placeholder="Enter phone number">
<br><br>
<button type="button" onclick="showFocusedField()">SHOW FOCUSED FIELD</button>
</form>
<p id="focusInfo"></p>
<script>
function showFocusedField() {
var fields = ['firstName', 'lastName', 'phone'];
var focusedFields = [];
fields.forEach(function(fieldId) {
var field = document.getElementById(fieldId);
if (field.autofocus) {
focusedFields.push(fieldId);
}
});
document.getElementById("focusInfo").innerHTML =
"Fields with autofocus: " + (focusedFields.length ? focusedFields.join(', ') : 'None');
}
</script>
</body>
</html>
Only the first name field receives focus automatically. The output shows which fields have autofocus enabled −
First Name: [cursor here] Enter first name Last Name: Enter last name Phone: Enter phone number [SHOW FOCUSED FIELD] After clicking: Fields with autofocus: firstName
Key Points
Only one element should have autofocus per page. If multiple elements have autofocus, the first one in the document order receives focus.
Accessibility consideration − Autofocus can be disruptive for screen reader users and should be used carefully.
Mobile behavior − On mobile devices, autofocus may cause the virtual keyboard to appear automatically.
Form usability − Autofocus is particularly useful for search boxes, login forms, and primary input fields.
Browser Compatibility
The autofocus property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. It works consistently across desktop and mobile platforms.
Conclusion
The HTML DOM Input Text autofocus property provides a convenient way to automatically focus input fields when a page loads. It can be set dynamically using JavaScript and returns a boolean value indicating the current autofocus state. Use autofocus judiciously to enhance user experience without creating accessibility issues.
214 Views
