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 URL autofocus Property
The HTML DOM Input URL autofocus property sets or returns whether a URL input field should automatically get focus when the page loads. This property corresponds to the HTML autofocus attribute and allows dynamic control over input field focus behavior.
Syntax
Following is the syntax for getting the autofocus property value −
inputURLObject.autofocus
Following is the syntax for setting the autofocus property −
inputURLObject.autofocus = booleanValue
Parameters
The booleanValue parameter can be one of the following −
| Value | Description |
|---|---|
| true | The URL input field will automatically receive focus when the page loads |
| false | Default value. The URL input field will not automatically receive focus |
Return Value
The property returns a boolean value −
-
trueif the URL input field has autofocus enabled -
falseif the URL input field does not have autofocus enabled
Example − Getting Autofocus Status
Following example demonstrates how to check the autofocus status of a URL input field −
<!DOCTYPE html>
<html>
<head>
<title>URL Input Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>URL Input Autofocus Example</h2>
<form>
<label for="websiteURL">Website URL:</label>
<input type="url" id="websiteURL" placeholder="https://example.com" autofocus>
<br><br>
<button type="button" onclick="checkAutofocus()">Check Autofocus Status</button>
<p id="result"></p>
</form>
<script>
function checkAutofocus() {
var urlInput = document.getElementById("websiteURL");
var status = urlInput.autofocus;
document.getElementById("result").innerHTML = "Autofocus is: " + status;
}
</script>
</body>
</html>
The output shows the current autofocus status when the button is clicked −
Autofocus is: true
Example − Setting Autofocus Property
Following example shows how to dynamically enable and disable autofocus on a URL input field −
<!DOCTYPE html>
<html>
<head>
<title>Set URL Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Control URL Input Autofocus</h2>
<form>
<label for="myURL">Enter URL:</label>
<input type="url" id="myURL" placeholder="https://www.tutorialspoint.com">
<br><br>
<button type="button" onclick="enableAutofocus()">Enable Autofocus</button>
<button type="button" onclick="disableAutofocus()">Disable Autofocus</button>
<button type="button" onclick="showStatus()">Show Status</button>
<p id="status"></p>
</form>
<script>
var urlInput = document.getElementById("myURL");
var statusDisplay = document.getElementById("status");
function enableAutofocus() {
urlInput.autofocus = true;
statusDisplay.innerHTML = "Autofocus enabled: " + urlInput.autofocus;
}
function disableAutofocus() {
urlInput.autofocus = false;
statusDisplay.innerHTML = "Autofocus disabled: " + urlInput.autofocus;
}
function showStatus() {
statusDisplay.innerHTML = "Current autofocus status: " + urlInput.autofocus;
}
</script>
</body>
</html>
The output changes based on which button is clicked −
Current autofocus status: true (or false depending on the action)
Example − Multiple URL Inputs
Following example demonstrates working with multiple URL input fields and their autofocus properties −
<!DOCTYPE html>
<html>
<head>
<title>Multiple URL Inputs Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple URL Inputs</h2>
<form>
<label for="url1">Primary URL:</label>
<input type="url" id="url1" placeholder="https://primary.com" autofocus>
<br><br>
<label for="url2">Secondary URL:</label>
<input type="url" id="url2" placeholder="https://secondary.com">
<br><br>
<button type="button" onclick="checkAllAutofocus()">Check All Autofocus</button>
<button type="button" onclick="switchAutofocus()">Switch to Secondary</button>
<div id="results"></div>
</form>
<script>
function checkAllAutofocus() {
var url1 = document.getElementById("url1");
var url2 = document.getElementById("url2");
var results = document.getElementById("results");
results.innerHTML = "<p>Primary URL autofocus: " + url1.autofocus + "</p>" +
"<p>Secondary URL autofocus: " + url2.autofocus + "</p>";
}
function switchAutofocus() {
var url1 = document.getElementById("url1");
var url2 = document.getElementById("url2");
url1.autofocus = false;
url2.autofocus = true;
document.getElementById("results").innerHTML = "<p>Switched autofocus to secondary URL</p>";
}
</script>
</body>
</html>
The output displays the autofocus status of both URL input fields −
Primary URL autofocus: true Secondary URL autofocus: false
Key Points
- Only one element per page should have autofocus enabled at a time
- The autofocus property can be changed dynamically using JavaScript
- Setting autofocus to true does not immediately focus the element; it only affects the next page load
- The property reflects the current state of the HTML autofocus attribute
- Autofocus works across all modern browsers that support the URL input type
Conclusion
The HTML DOM Input URL autofocus property provides programmatic control over whether a URL input field should automatically receive focus when the page loads. This property is useful for creating user-friendly forms where the most important input field is immediately ready for user interaction.
188 Views
