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 Search autofocus Property
The HTML DOM Input Search autofocus property is associated with the HTML <input> element's autofocus attribute. This property is used for setting or returning whether the input search field should automatically be focused when the page loads.
Syntax
Following is the syntax for setting the autofocus property −
searchObject.autofocus = true|false
Following is the syntax for returning the autofocus property −
searchObject.autofocus
Property Values
The autofocus property accepts the following boolean values −
true − The search field should get focus when the page loads.
false − The search field should not get focus automatically (default value).
Return Value
The autofocus property returns a Boolean value indicating whether the search field has the autofocus attribute set or not.
Example − Getting Autofocus Property
Following example demonstrates how to check if a search field has the autofocus property set −
<!DOCTYPE html>
<html>
<head>
<title>Input Search Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Input Search Autofocus Property</h2>
<form>
<label for="SEARCH1">FRUITS:</label>
<input type="search" id="SEARCH1" name="fruits" autofocus>
</form>
<p>Get the autofocus attribute value for the above search field by clicking the button below.</p>
<button type="button" onclick="checkFocus()">CHECK FOCUS</button>
<p id="result"></p>
<script>
function checkFocus() {
var searchField = document.getElementById("SEARCH1");
var hasAutofocus = searchField.autofocus;
document.getElementById("result").innerHTML = "The search field has autofocus property set to: " + hasAutofocus;
}
</script>
</body>
</html>
The output shows the search field with automatic focus and displays whether autofocus is enabled −
Input Search Autofocus Property FRUITS: [search field with cursor focused] Get the autofocus attribute value for the above search field by clicking the button below. [CHECK FOCUS] After clicking: The search field has autofocus property set to: true
Example − Setting Autofocus Property
Following example demonstrates how to dynamically set the autofocus property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Set Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Dynamic Autofocus Control</h2>
<form>
<label for="searchBox">Search Products:</label>
<input type="search" id="searchBox" name="products" placeholder="Enter product name">
</form>
<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>
<p id="status"></p>
<script>
function enableAutofocus() {
document.getElementById("searchBox").autofocus = true;
document.getElementById("status").innerHTML = "Autofocus enabled for search field.";
}
function disableAutofocus() {
document.getElementById("searchBox").autofocus = false;
document.getElementById("status").innerHTML = "Autofocus disabled for search field.";
}
function checkStatus() {
var isAutofocus = document.getElementById("searchBox").autofocus;
document.getElementById("status").innerHTML = "Current autofocus status: " + isAutofocus;
}
</script>
</body>
</html>
The output allows you to dynamically control the autofocus property and check its current status −
Dynamic Autofocus Control Search Products: [search field] [Enable Autofocus] [Disable Autofocus] [Check Status] Status updates based on button clicks: - "Autofocus enabled for search field." - "Autofocus disabled for search field." - "Current autofocus status: true/false"
Example − Multiple Search Fields
Following example shows how autofocus works with multiple search fields on the same page −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Search Fields</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Multiple Search Fields Example</h2>
<form>
<p>
<label for="search1">Search Books:</label>
<input type="search" id="search1" name="books" autofocus>
</p>
<p>
<label for="search2">Search Authors:</label>
<input type="search" id="search2" name="authors">
</p>
<p>
<label for="search3">Search Categories:</label>
<input type="search" id="search3" name="categories">
</p>
</form>
<button type="button" onclick="checkAllFocus()">Check All Autofocus</button>
<div id="results"></div>
<script>
function checkAllFocus() {
var search1 = document.getElementById("search1").autofocus;
var search2 = document.getElementById("search2").autofocus;
var search3 = document.getElementById("search3").autofocus;
var resultHTML = "<h3>Autofocus Status:</h3>";
resultHTML += "<p>Books search: " + search1 + "</p>";
resultHTML += "<p>Authors search: " + search2 + "</p>";
resultHTML += "<p>Categories search: " + search3 + "</p>";
document.getElementById("results").innerHTML = resultHTML;
}
</script>
</body>
</html>
Only the first search field (Books) has autofocus enabled, so it receives focus when the page loads −
Multiple Search Fields Example Search Books: [focused search field] Search Authors: [search field] Search Categories: [search field] [Check All Autofocus] After clicking: Autofocus Status: Books search: true Authors search: false Categories search: false
Browser Compatibility
The autofocus property is supported in all modern browsers. However, only one element per document should have the autofocus attribute set to avoid conflicts.
Conclusion
The HTML DOM Input Search autofocus property allows you to control whether a search field automatically receives focus when the page loads. It returns a boolean value indicating the current autofocus state and can be dynamically modified using JavaScript. This property improves user experience by directing attention to important search functionality.
180 Views
