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 Number autofocus Property
The HTML DOM Input Number autofocus property returns and modifies whether a number input field should automatically receive focus when the page loads. This property corresponds to the autofocus HTML attribute and allows dynamic control over input focus behavior.
Syntax
Following is the syntax for returning the autofocus property −
object.autofocus
Following is the syntax for setting the autofocus property −
object.autofocus = true | false
Return Value
The property returns a Boolean value −
true− if the input number field has autofocus enabledfalse− if the input number field does not have autofocus enabled
Example − Getting Autofocus Status
Following example demonstrates how to check if a number input field has autofocus enabled −
<!DOCTYPE html>
<html>
<head>
<title>Get Autofocus Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Check Autofocus Status</h2>
<input type="number" id="numInput" autofocus value="12345" style="padding: 8px; margin: 10px;">
<br>
<button onclick="checkAutofocus()" style="padding: 8px 16px; margin: 10px; cursor: pointer;">Check Autofocus</button>
<p id="result"></p>
<script>
function checkAutofocus() {
var input = document.getElementById("numInput");
var status = input.autofocus;
document.getElementById("result").innerHTML = "Autofocus is: " + status;
}
</script>
</body>
</html>
The output displays the autofocus status when the button is clicked −
Number Input: [12345] (automatically focused) [Check Autofocus] Result: Autofocus is: true
Example − Disabling Autofocus
Following example shows how to disable autofocus on a number input field −
<!DOCTYPE html>
<html>
<head>
<title>Disable Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center; background-color: #f5f5f5;">
<h2>Autofocus Property Example</h2>
<p>The number input below has autofocus enabled. Click Disable to turn it off.</p>
<input type="number" id="numberField" autofocus value="23450004"
style="padding: 10px; font-size: 16px; margin: 10px; border: 2px solid #ddd; border-radius: 4px;">
<br>
<button onclick="disableAutofocus()"
style="background-color: #dc3545; color: white; padding: 10px 20px; border: none; border-radius: 25px; cursor: pointer; margin: 5px;">
Disable Autofocus
</button>
<button onclick="enableAutofocus()"
style="background-color: #28a745; color: white; padding: 10px 20px; border: none; border-radius: 25px; cursor: pointer; margin: 5px;">
Enable Autofocus
</button>
<p id="status"></p>
<script>
function disableAutofocus() {
var input = document.getElementById("numberField");
input.autofocus = false;
document.getElementById("status").innerHTML = "Autofocus disabled. Refresh page to see the effect.";
document.getElementById("status").style.color = "#dc3545";
}
function enableAutofocus() {
var input = document.getElementById("numberField");
input.autofocus = true;
document.getElementById("status").innerHTML = "Autofocus enabled. Refresh page to see the effect.";
document.getElementById("status").style.color = "#28a745";
}
</script>
</body>
</html>
The number input initially has focus. Clicking "Disable Autofocus" removes the autofocus property, and clicking "Enable Autofocus" restores it −
The number input below has autofocus enabled. Click Disable to turn it off. [23450004] (focused input field) [Disable Autofocus] [Enable Autofocus] Status: Autofocus disabled. Refresh page to see the effect.
Example − Multiple Number Inputs
Following example demonstrates autofocus behavior with multiple number input fields −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Number Inputs</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple Number Inputs with Autofocus</h2>
<p>Only one input should have autofocus at a time:</p>
<label>Age:
<input type="number" id="age" value="25" style="padding: 5px; margin: 5px;">
</label><br>
<label>Weight:
<input type="number" id="weight" autofocus value="70" style="padding: 5px; margin: 5px;">
</label><br>
<label>Height:
<input type="number" id="height" value="175" style="padding: 5px; margin: 5px;">
</label><br>
<button onclick="switchFocus('age')" style="padding: 5px 10px; margin: 3px; cursor: pointer;">Focus Age</button>
<button onclick="switchFocus('weight')" style="padding: 5px 10px; margin: 3px; cursor: pointer;">Focus Weight</button>
<button onclick="switchFocus('height')" style="padding: 5px 10px; margin: 3px; cursor: pointer;">Focus Height</button>
<script>
function switchFocus(targetId) {
// Remove autofocus from all inputs
var inputs = document.querySelectorAll('input[type="number"]');
inputs.forEach(function(input) {
input.autofocus = false;
});
// Set autofocus on target input
document.getElementById(targetId).autofocus = true;
document.getElementById(targetId).focus();
}
</script>
</body>
</html>
The weight input initially has focus. Clicking the buttons switches autofocus and focus between different number inputs.
Key Points
The autofocus property only affects page load behavior. Setting it dynamically requires using
focus()method to immediately focus the element.Only one element on a page should have autofocus enabled at a time.
The autofocus property corresponds to the HTML
autofocusattribute.This property is supported in all modern browsers for number input fields.
Conclusion
The HTML DOM Input Number autofocus property provides programmatic control over whether a number input field automatically receives focus when the page loads. It returns a boolean value and can be dynamically modified to enable or disable autofocus behavior, making it useful for creating interactive forms with controlled focus management.
177 Views
