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 Checkbox autofocus Property
The HTML DOM Input Checkbox autofocus Property sets or returns whether a checkbox should automatically receive focus when the page loads. This property corresponds to the autofocus attribute in HTML and is useful for improving user experience by directing attention to important form elements.
When a checkbox has the autofocus property set to true, it will be highlighted with a focus outline as soon as the page finishes loading, without requiring user interaction.
Syntax
Following is the syntax for returning the autofocus property −
checkboxObject.autofocus
Following is the syntax for setting the autofocus property −
checkboxObject.autofocus = true|false
Property Values
The autofocus property accepts the following boolean values −
true − The checkbox will automatically receive focus when the page loads.
false − The checkbox will not automatically receive focus (default behavior).
Return Value
The property returns a boolean value indicating whether the checkbox has the autofocus attribute set or not.
Example − Basic Autofocus Property
Following example demonstrates the autofocus property with a checkbox that automatically gets focus on page load −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM autofocus property</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
p {
font-size: 1.2rem;
color: #ff8741;
}
input[type="checkbox"] {
width: 30px;
height: 30px;
outline: 2px solid #db133a;
}
button {
background-color: #db133a;
color: white;
padding: 8px 16px;
border: none;
margin: 0.5rem;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>autofocus Property Example</h1>
<p>Do you need help?</p>
<input type="checkbox" id="helpCheckbox" autofocus>
<br><br>
<button onclick="checkYes()">Yes</button>
<button onclick="checkNo()">No</button>
<script>
function checkYes() {
document.getElementById("helpCheckbox").checked = true;
}
function checkNo() {
document.getElementById("helpCheckbox").checked = false;
}
</script>
</body>
</html>
The checkbox automatically receives focus when the page loads, indicated by the red outline. The "Yes" and "No" buttons control the checked state of the checkbox.
Example − Getting and Setting Autofocus Property
Following example shows how to get and set the autofocus property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Get/Set Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Checkbox Autofocus Control</h2>
<label for="myCheckbox">Subscribe to newsletter: </label>
<input type="checkbox" id="myCheckbox" autofocus>
<br><br>
<button onclick="getAutofocus()">Get Autofocus Status</button>
<button onclick="enableAutofocus()">Enable Autofocus</button>
<button onclick="disableAutofocus()">Disable Autofocus</button>
<p id="result"></p>
<script>
function getAutofocus() {
var checkbox = document.getElementById("myCheckbox");
var status = checkbox.autofocus;
document.getElementById("result").innerHTML =
"Autofocus is: " + (status ? "Enabled" : "Disabled");
}
function enableAutofocus() {
document.getElementById("myCheckbox").autofocus = true;
document.getElementById("result").innerHTML = "Autofocus enabled!";
}
function disableAutofocus() {
document.getElementById("myCheckbox").autofocus = false;
document.getElementById("result").innerHTML = "Autofocus disabled!";
}
</script>
</body>
</html>
The output displays buttons to get the current autofocus status and toggle the autofocus property dynamically −
Subscribe to newsletter: ? (focused with outline) [Get Autofocus Status] [Enable Autofocus] [Disable Autofocus] Autofocus is: Enabled
Example − Multiple Checkboxes with Autofocus Control
Following example demonstrates managing autofocus across multiple checkboxes −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Checkboxes Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Skill Selection Form</h2>
<p>Select your programming skills:</p>
<label><input type="checkbox" id="html" value="HTML"> HTML</label><br>
<label><input type="checkbox" id="css" value="CSS" autofocus> CSS</label><br>
<label><input type="checkbox" id="js" value="JavaScript"> JavaScript</label><br>
<label><input type="checkbox" id="python" value="Python"> Python</label><br><br>
<button onclick="setFocusToFirst()">Focus First Checkbox</button>
<button onclick="checkAutofocus()">Check Which Has Autofocus</button>
<p id="info"></p>
<script>
function setFocusToFirst() {
var firstCheckbox = document.getElementById("html");
firstCheckbox.autofocus = true;
firstCheckbox.focus();
document.getElementById("info").innerHTML = "First checkbox now has autofocus and focus.";
}
function checkAutofocus() {
var checkboxes = ["html", "css", "js", "python"];
var result = "";
checkboxes.forEach(function(id) {
var checkbox = document.getElementById(id);
if (checkbox.autofocus) {
result += checkbox.value + " has autofocus. ";
}
});
document.getElementById("info").innerHTML = result || "No checkbox has autofocus.";
}
</script>
</body>
</html>
Initially, only the CSS checkbox has autofocus. The buttons allow you to transfer autofocus to the first checkbox or check which checkboxes currently have the autofocus property.
Key Points
Only one element per page should have the
autofocusattribute to avoid confusion.The autofocus property is a boolean value that can be read and modified using JavaScript.
Setting
autofocus = trueis different from callingfocus()method. Autofocus works automatically when the page loads.The autofocus property is supported in all modern browsers but may not work in some older versions.
Browser Compatibility
The autofocus property is widely supported across modern browsers including Chrome, Firefox, Safari, Edge, and Opera. However, it may not be supported in Internet Explorer versions prior to IE 10.
Conclusion
The HTML DOM Input Checkbox autofocus property provides programmatic control over which checkbox receives focus when a page loads. It returns a boolean value indicating the autofocus state and can be set to true or false to enable or disable automatic focusing behavior.
231 Views
