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 Select autofocus Property
The HTML DOM Select autofocus property sets or returns whether a dropdown list should automatically receive focus when the page loads. This property corresponds to the HTML autofocus attribute and is useful for improving user experience by directing attention to important form elements.
Syntax
Following is the syntax for returning the autofocus property −
selectObject.autofocus
Following is the syntax for setting the autofocus property −
selectObject.autofocus = true | false
Property Values
The autofocus property accepts the following values −
true − The dropdown list will automatically receive focus when the page loads.
false − The dropdown list will not automatically receive focus when the page loads (default behavior).
Return Value
The property returns a Boolean value indicating whether the select element has autofocus enabled (true) or disabled (false).
Example − Setting Autofocus on Page Load
Following example demonstrates how to set autofocus on a select element when the page loads −
<!DOCTYPE html>
<html>
<head>
<title>Select Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Favorite Subject</h2>
<select id="subjects" autofocus>
<option value="">Choose a subject</option>
<option value="math">Mathematics</option>
<option value="physics">Physics</option>
<option value="chemistry">Chemistry</option>
<option value="biology">Biology</option>
</select>
<p id="status"></p>
<button onclick="checkAutofocus()">Check Autofocus Status</button>
<script>
function checkAutofocus() {
var select = document.getElementById("subjects");
var status = select.autofocus ? "enabled" : "disabled";
document.getElementById("status").innerHTML = "Autofocus is " + status;
}
</script>
</body>
</html>
The output shows the dropdown automatically focused with a visible focus outline −
Select Your Favorite Subject [Choose a subject ?] (focused with outline) [Check Autofocus Status] Autofocus is enabled
Example − Toggling Autofocus Property
Following example demonstrates how to enable and disable the autofocus property dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Autofocus Control Demo</h2>
<label for="courses">Select a Course:</label>
<select id="courses" name="courses">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="react">React</option>
</select>
<div style="margin: 20px 0;">
<button onclick="enableAutofocus()">Enable Autofocus</button>
<button onclick="disableAutofocus()">Disable Autofocus</button>
<button onclick="reloadPage()">Reload Page</button>
</div>
<p id="result"></p>
<script>
function enableAutofocus() {
var select = document.getElementById("courses");
select.autofocus = true;
document.getElementById("result").innerHTML = "Autofocus enabled. Reload the page to see the effect.";
}
function disableAutofocus() {
var select = document.getElementById("courses");
select.autofocus = false;
document.getElementById("result").innerHTML = "Autofocus disabled.";
}
function reloadPage() {
location.reload();
}
</script>
</body>
</html>
The output allows you to toggle autofocus and reload to see the effect −
Autofocus Control Demo Select a Course: [HTML ?] [Enable Autofocus] [Disable Autofocus] [Reload Page] Autofocus enabled. Reload the page to see the effect.
Example − Multiple Select Elements
Following example shows how only one element can have autofocus at a time −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Select Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple Select Elements</h2>
<div>
<label>Country:</label>
<select id="country">
<option>USA</option>
<option>Canada</option>
<option>UK</option>
</select>
</div>
<div style="margin: 10px 0;">
<label>Language:</label>
<select id="language" autofocus>
<option>English</option>
<option>Spanish</option>
<option>French</option>
</select>
</div>
<div>
<label>Category:</label>
<select id="category">
<option>Technology</option>
<option>Science</option>
<option>Arts</option>
</select>
</div>
<button onclick="checkAllAutofocus()" style="margin-top: 15px;">Check All Autofocus</button>
<div id="output"></div>
<script>
function checkAllAutofocus() {
var country = document.getElementById("country").autofocus;
var language = document.getElementById("language").autofocus;
var category = document.getElementById("category").autofocus;
var result = "<p>Autofocus Status:</p>";
result += "<ul>";
result += "<li>Country: " + (country ? "ON" : "OFF") + "</li>";
result += "<li>Language: " + (language ? "ON" : "OFF") + "</li>";
result += "<li>Category: " + (category ? "ON" : "OFF") + "</li>";
result += "</ul>";
document.getElementById("output").innerHTML = result;
}
</script>
</body>
</html>
The output shows that only the Language dropdown (which has the autofocus attribute) receives focus −
Multiple Select Elements Country: [USA ?] Language: [English ?] (focused) Category: [Technology ?] [Check All Autofocus] Autofocus Status: ? Country: OFF ? Language: ON ? Category: OFF
Key Points
The autofocus property only takes effect when the page loads. Setting it dynamically requires a page reload to see the visual effect.
Only one element on a page should have autofocus enabled. If multiple elements have autofocus, the browser focuses on the first one encountered.
The property is particularly useful for search forms, login pages, or any interface where immediate user input is expected.
Autofocus can improve accessibility by guiding users to the primary action element on the page.
Browser Compatibility
The Select autofocus property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It corresponds to the HTML5 autofocus attribute which is widely supported.
Conclusion
The HTML DOM Select autofocus property provides programmatic control over which dropdown list receives focus when a page loads. It enhances user experience by directing attention to important form elements, though it should be used judiciously to avoid disrupting the user's browsing flow.
161 Views
