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 Radio autofocus property
The HTML DOM Input Radio autofocus property is associated with the HTML <input> element's autofocus attribute. This property sets or returns whether a radio button should automatically receive focus when the page loads.
Syntax
Following is the syntax for setting the autofocus property −
radioObject.autofocus = true|false
Following is the syntax for getting the autofocus property −
var focusState = radioObject.autofocus;
Parameters
The autofocus property accepts boolean values −
true − The radio button will automatically get focus when the page loads.
false − The radio button will not automatically get focus. This is the default value.
Return Value
The property returns a boolean value indicating whether the radio button has the autofocus attribute set or not.
Example − Getting Autofocus Property
Following example demonstrates how to check if a radio button has the autofocus property enabled −
<!DOCTYPE html>
<html>
<head>
<title>Input Radio Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Radio Autofocus Property</h2>
<form>
<label>
<input type="radio" id="rad1" name="options" value="option1" autofocus>
Option 1 (with autofocus)
</label><br><br>
<label>
<input type="radio" id="rad2" name="options" value="option2">
Option 2 (without autofocus)
</label>
</form>
<br>
<button type="button" onclick="checkFocus()">Check Focus Property</button>
<p id="result"></p>
<script>
function checkFocus() {
var radio1 = document.getElementById("rad1").autofocus;
var radio2 = document.getElementById("rad2").autofocus;
document.getElementById("result").innerHTML =
"Radio 1 autofocus: " + radio1 + "<br>" +
"Radio 2 autofocus: " + radio2;
}
</script>
</body>
</html>
The output shows that the first radio button has autofocus enabled and automatically receives focus when the page loads −
Input Radio Autofocus Property ? Option 1 (with autofocus) [focused on page load] ? Option 2 (without autofocus) [Check Focus Property] Radio 1 autofocus: true Radio 2 autofocus: false
Example − Setting Autofocus Property
Following example demonstrates how to dynamically set the autofocus property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Setting Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Setting Radio Button Autofocus</h2>
<form>
<label>
<input type="radio" id="choice1" name="choices" value="A">
Choice A
</label><br><br>
<label>
<input type="radio" id="choice2" name="choices" value="B">
Choice B
</label>
</form>
<br>
<button onclick="enableAutofocus()">Enable Autofocus on Choice A</button>
<button onclick="disableAutofocus()">Disable Autofocus</button>
<button onclick="checkStatus()">Check Status</button>
<p id="status"></p>
<script>
function enableAutofocus() {
document.getElementById("choice1").autofocus = true;
document.getElementById("status").innerHTML = "Autofocus enabled for Choice A";
}
function disableAutofocus() {
document.getElementById("choice1").autofocus = false;
document.getElementById("status").innerHTML = "Autofocus disabled for Choice A";
}
function checkStatus() {
var status = document.getElementById("choice1").autofocus;
document.getElementById("status").innerHTML = "Choice A autofocus status: " + status;
}
</script>
</body>
</html>
This example allows you to dynamically enable or disable the autofocus property and check its current status.
How It Works
The autofocus property works as follows −
When set to
true, the radio button automatically receives focus when the page loadsOnly one element per document should have the autofocus attribute to avoid conflicts
The property reflects the presence of the HTML
autofocusattributeSetting the property via JavaScript adds or removes the autofocus attribute from the HTML element
Browser Compatibility
The autofocus property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. However, the actual focusing behavior may vary slightly across different browsers and devices, especially on mobile platforms where autofocus might be disabled to prevent unwanted keyboard popup.
Conclusion
The HTML DOM Input Radio autofocus property provides a way to control which radio button automatically receives focus when a page loads. It can be both retrieved and set using JavaScript, making it useful for dynamic form behavior and improving user experience by directing attention to important form elements.
351 Views
