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 Submit autofocus property
The HTML DOM Input Submit autofocus property is associated with the HTML <input> element's autofocus attribute. This property is used for setting or returning whether the submit button should be automatically focused when the page loads.
When a submit button has autofocus enabled, it receives keyboard focus immediately after the page finishes loading, allowing users to press Enter to submit the form without clicking or tabbing to the button first.
Syntax
Following is the syntax for setting the autofocus property −
submitObject.autofocus = true|false
Following is the syntax for getting the autofocus property −
var autofocusValue = submitObject.autofocus;
Parameters
true − The submit button should automatically receive focus when the page loads.
false − The submit button should not automatically receive focus. This is the default value.
Return Value
The property returns a boolean value −
true − If the submit button has the autofocus attribute set.
false − If the submit button does not have the autofocus attribute.
Example − Getting Autofocus Property Value
Following example demonstrates how to check if a submit button has autofocus enabled −
<!DOCTYPE html>
<html>
<head>
<title>Submit Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Submit Autofocus Property Example</h2>
<form action="/sample_page.php" style="border: 2px solid green; padding: 15px; margin-bottom: 10px;">
<label>Username: <input type="text" id="username"></label><br><br>
<label>Location: <input type="text" id="location"></label><br><br>
<input type="submit" id="submitBtn" value="Submit" autofocus>
</form>
<p>Click the button below to check the submit button's autofocus property:</p>
<button type="button" onclick="checkAutofocus()">Check Autofocus</button>
<p id="result"></p>
<script>
function checkAutofocus() {
var submitButton = document.getElementById("submitBtn");
var hasAutofocus = submitButton.autofocus;
document.getElementById("result").innerHTML =
"The submit button autofocus property is set to: " + hasAutofocus;
}
</script>
</body>
</html>
The output shows the form with an autofocused submit button. When you click "Check Autofocus", it displays the property value −
Submit Autofocus Property Example [Username: ______] [Location: ______] [Submit] (this button has focus outline) Click the button below to check the submit button's autofocus property: [Check Autofocus] (After clicking: "The submit button autofocus property is set to: true")
Example − Setting Autofocus Property
Following example shows how to dynamically set the autofocus property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Setting Submit Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Dynamically Set Autofocus</h2>
<form style="border: 2px solid blue; padding: 15px; margin-bottom: 10px;">
<label>Name: <input type="text" id="name"></label><br><br>
<label>Email: <input type="email" id="email"></label><br><br>
<input type="submit" id="mySubmit" value="Send">
</form>
<button onclick="enableAutofocus()">Enable Autofocus</button>
<button onclick="disableAutofocus()">Disable Autofocus</button>
<button onclick="checkStatus()">Check Status</button>
<p id="status"></p>
<script>
function enableAutofocus() {
document.getElementById("mySubmit").autofocus = true;
document.getElementById("mySubmit").focus();
document.getElementById("status").innerHTML = "Autofocus enabled and button focused.";
}
function disableAutofocus() {
document.getElementById("mySubmit").autofocus = false;
document.getElementById("status").innerHTML = "Autofocus disabled.";
}
function checkStatus() {
var isAutofocus = document.getElementById("mySubmit").autofocus;
document.getElementById("status").innerHTML = "Current autofocus status: " + isAutofocus;
}
</script>
</body>
</html>
This example allows you to dynamically enable or disable autofocus on the submit button and check its current status.
Example − Multiple Submit Buttons
Following example shows how autofocus works when there are multiple submit buttons −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Submit Buttons</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Multiple Submit Buttons Example</h2>
<form style="border: 2px solid red; padding: 15px;">
<label>Message: <textarea rows="3" cols="30"></textarea></label><br><br>
<input type="submit" id="save" value="Save Draft">
<input type="submit" id="publish" value="Publish" autofocus>
<input type="submit" id="delete" value="Delete">
</form>
<p><button onclick="checkAllButtons()">Check All Buttons</button></p>
<div id="results"></div>
<script>
function checkAllButtons() {
var buttons = ["save", "publish", "delete"];
var results = "<h3>Autofocus Status:</h3>";
buttons.forEach(function(buttonId) {
var button = document.getElementById(buttonId);
var hasAutofocus = button.autofocus;
results += buttonId + " button: " + hasAutofocus + "<br>";
});
document.getElementById("results").innerHTML = results;
}
</script>
</body>
</html>
Only the "Publish" button has autofocus enabled, so it receives focus when the page loads. The check function shows the autofocus status of all three buttons.
Browser Compatibility
The autofocus property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. However, on mobile devices, autofocus behavior may be limited to preserve user experience and prevent unwanted keyboard popups.
Key Points
Only one element on a page should have autofocus to avoid conflicts.
The autofocus attribute works on page load, not when elements are dynamically created.
Setting
autofocus = truevia JavaScript does not automatically focus the element; usefocus()method for that.The property returns the current state of the autofocus attribute, not whether the element currently has focus.
Conclusion
The HTML DOM Input Submit autofocus property provides a way to automatically focus submit buttons when a page loads, improving form usability. You can both read and modify this property using JavaScript, making it useful for dynamic form behavior and accessibility enhancements.
220 Views
