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 autocomplete Property
The HTML DOM Input URL autocomplete property controls whether the browser should automatically complete values based on previously entered data. When enabled, it displays suggestions from the user's browsing history as they type in a URL input field.
Syntax
Following is the syntax for getting the autocomplete property value −
inputURLObject.autocomplete
Following is the syntax for setting the autocomplete property −
inputURLObject.autocomplete = value
Property Values
The autocomplete property accepts the following values −
| Value | Description |
|---|---|
| on | Enables autocomplete functionality. The browser will suggest previously entered URLs. |
| off | Disables autocomplete functionality. No suggestions will be shown to the user. |
Return Value
The property returns a string representing the current autocomplete setting: either "on" or "off".
Example − Getting Autocomplete Property
Following example demonstrates how to retrieve the current autocomplete setting of a URL input −
<!DOCTYPE html>
<html>
<head>
<title>Get URL Autocomplete Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>URL Input Autocomplete Property</h3>
<label for="websiteURL">Website URL:</label>
<input type="url" id="websiteURL" placeholder="https://example.com" autocomplete="on">
<br><br>
<button onclick="getAutocomplete()">Get Autocomplete Setting</button>
<p id="result"></p>
<script>
function getAutocomplete() {
var urlInput = document.getElementById("websiteURL");
var autocompleteValue = urlInput.autocomplete;
document.getElementById("result").innerHTML = "Autocomplete is: " + autocompleteValue;
}
</script>
</body>
</html>
The output shows the current autocomplete setting when the button is clicked −
Autocomplete is: on
Example − Setting Autocomplete Property
Following example shows how to dynamically change the autocomplete property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Set URL Autocomplete Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Toggle URL Autocomplete</h3>
<label for="urlField">Enter URL:</label>
<input type="url" id="urlField" placeholder="https://www.example.com" autocomplete="off">
<br><br>
<button onclick="enableAutocomplete()">Enable Suggestions</button>
<button onclick="disableAutocomplete()">Disable Suggestions</button>
<p id="status">Current setting: off</p>
<script>
var urlInput = document.getElementById("urlField");
var statusDisplay = document.getElementById("status");
function enableAutocomplete() {
urlInput.autocomplete = "on";
statusDisplay.innerHTML = "Current setting: " + urlInput.autocomplete;
}
function disableAutocomplete() {
urlInput.autocomplete = "off";
statusDisplay.innerHTML = "Current setting: " + urlInput.autocomplete;
}
</script>
</body>
</html>
The buttons toggle the autocomplete functionality and display the current setting −
Current setting: on (after clicking "Enable Suggestions") Current setting: off (after clicking "Disable Suggestions")
Example − Form with Multiple URL Inputs
Following example demonstrates managing autocomplete settings for multiple URL input fields in a form −
<!DOCTYPE html>
<html>
<head>
<title>Multiple URL Inputs</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Website Information Form</h3>
<form>
<fieldset style="margin: 10px 0; padding: 15px;">
<legend>Website URLs</legend>
<label>Company Website:</label>
<input type="url" id="companyURL" autocomplete="on" placeholder="https://company.com">
<br><br>
<label>Support URL:</label>
<input type="url" id="supportURL" autocomplete="off" placeholder="https://support.company.com">
<br><br>
<button type="button" onclick="checkAllSettings()">Check All Settings</button>
<button type="button" onclick="enableAll()">Enable All</button>
<div id="settingsDisplay" style="margin-top: 10px;"></div>
</fieldset>
</form>
<script>
function checkAllSettings() {
var company = document.getElementById("companyURL");
var support = document.getElementById("supportURL");
var display = document.getElementById("settingsDisplay");
display.innerHTML = "<b>Autocomplete Settings:</b><br>" +
"Company URL: " + company.autocomplete + "<br>" +
"Support URL: " + support.autocomplete;
}
function enableAll() {
document.getElementById("companyURL").autocomplete = "on";
document.getElementById("supportURL").autocomplete = "on";
checkAllSettings();
}
</script>
</body>
</html>
This example shows how different URL inputs can have different autocomplete settings, and how to manage them programmatically.
Browser Compatibility
The autocomplete property is supported in all modern browsers. However, the actual autocomplete behavior may vary depending on the browser's implementation and user settings. Some browsers may ignore the autocomplete attribute for security reasons in certain contexts.
Conclusion
The HTML DOM Input URL autocomplete property provides control over browser autocomplete functionality for URL input fields. Setting it to "on" enables suggestions from browsing history, while "off" disables this feature. This property is useful for enhancing user experience in forms while maintaining control over privacy and data entry behavior.
194 Views
