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 FileUpload autofocus Property
The HTML DOM Input FileUpload autofocus property controls whether a file upload input field automatically receives focus when the page loads. This property corresponds to the HTML autofocus attribute and can be used to programmatically set or check the autofocus state of file input elements.
Syntax
Following is the syntax for getting the autofocus property value −
inputFileUploadObject.autofocus
Following is the syntax for setting the autofocus property −
inputFileUploadObject.autofocus = booleanValue
Return Value
The autofocus property returns a boolean value indicating whether the file upload input has autofocus enabled −
true− The input field will automatically receive focus when the page loadsfalse− The input field will not automatically receive focus (default behavior)
Boolean Values
The booleanValue parameter can be one of the following −
| Value | Description |
|---|---|
| true | Sets the file upload input to automatically receive focus on page load |
| false | Removes autofocus from the file upload input (default state) |
Example − Setting and Removing Autofocus
Following example demonstrates how to manipulate the autofocus property of a file upload input −
<!DOCTYPE html>
<html>
<head>
<title>Input FileUpload autofocus Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
fieldset {
padding: 20px;
margin: 10px;
}
input[type="button"] {
border-radius: 10px;
padding: 8px 16px;
margin: 5px;
}
#divDisplay {
margin: 15px 0;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>FileUpload Autofocus Property</legend>
<label for="FileSelect">Upload File:
<input type="file" id="FileSelect" autofocus>
</label><br>
<input type="button" onclick="removeAutofocus()" value="Remove Autofocus">
<input type="button" onclick="addAutofocus()" value="Add Autofocus">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputFile = document.getElementById("FileSelect");
// Display initial autofocus state
divDisplay.textContent = 'Autofocus: ' + inputFile.autofocus;
function removeAutofocus() {
inputFile.autofocus = false;
divDisplay.textContent = 'Autofocus: ' + inputFile.autofocus;
}
function addAutofocus() {
inputFile.autofocus = true;
divDisplay.textContent = 'Autofocus: ' + inputFile.autofocus;
}
</script>
</body>
</html>
The output shows a file upload input with autofocus initially enabled. The buttons allow toggling the autofocus property, and the current state is displayed below −
FileUpload Autofocus Property Upload File: [Choose File] [Remove Autofocus] [Add Autofocus] Autofocus: true (After clicking "Remove Autofocus": Autofocus: false) (After clicking "Add Autofocus": Autofocus: true)
Example − Checking Autofocus on Multiple Inputs
Following example shows how to check autofocus status across multiple file inputs −
<!DOCTYPE html>
<html>
<head>
<title>Multiple File Inputs Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>File Upload Inputs</h2>
<form>
<p>Profile Picture: <input type="file" id="profile" autofocus></p>
<p>Resume: <input type="file" id="resume"></p>
<p>Portfolio: <input type="file" id="portfolio"></p>
<button type="button" onclick="checkAutofocus()">Check Autofocus Status</button>
</form>
<div id="results" style="margin-top: 15px;"></div>
<script>
function checkAutofocus() {
var results = document.getElementById("results");
var profile = document.getElementById("profile");
var resume = document.getElementById("resume");
var portfolio = document.getElementById("portfolio");
results.innerHTML =
"<p>Profile Picture autofocus: " + profile.autofocus + "</p>" +
"<p>Resume autofocus: " + resume.autofocus + "</p>" +
"<p>Portfolio autofocus: " + portfolio.autofocus + "</p>";
}
</script>
</body>
</html>
This example displays the autofocus status of three different file upload inputs when the button is clicked −
File Upload Inputs Profile Picture: [Choose File] Resume: [Choose File] Portfolio: [Choose File] [Check Autofocus Status] (After clicking button:) Profile Picture autofocus: true Resume autofocus: false Portfolio autofocus: false
Key Points
The autofocus property only affects the initial page load behavior
Only one element per document should have autofocus to avoid conflicts
Changing the property via JavaScript does not immediately focus/unfocus the element
The property reflects the presence of the HTML
autofocusattributeAutofocus may not work in all browsers or may be disabled by user settings
Browser Compatibility
The autofocus property is supported in all modern browsers that support the HTML5 file input type. However, the actual focusing behavior may vary based on browser settings and user preferences for accessibility.
Conclusion
The Input FileUpload autofocus property provides a way to control and check whether a file upload input automatically receives focus when the page loads. It returns a boolean value and can be set programmatically to enable or disable the autofocus behavior on file input elements.
154 Views
