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 Text autocomplete Property
The HTML DOM Input Text autocomplete property controls whether a text input field should have autocomplete functionality enabled or disabled. This property is associated with the autocomplete attribute of an <input> element with type="text".
The autocomplete feature allows browsers to automatically fill in text fields based on values the user has entered previously. This improves user experience by reducing typing effort for commonly entered data like names, addresses, and email addresses.
Syntax
Following is the syntax for setting the autocomplete property −
textObject.autocomplete = "on|off"
Following is the syntax for getting the autocomplete property −
var autocompleteValue = textObject.autocomplete;
Property Values
The autocomplete property accepts the following values −
on − The browser will automatically complete the input based on values that the user has entered before. This is the default value.
off − The browser will not automatically complete the input field.
Return Value
The autocomplete property returns a string representing the current autocomplete setting: either "on" or "off".
Example − Setting Autocomplete Property
Following example demonstrates how to dynamically change the autocomplete property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Input Text Autocomplete Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Text Autocomplete Property</h2>
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" autocomplete="on"><br><br>
<input type="submit" value="Submit">
</form>
<p>Control the autocomplete feature using the buttons below:</p>
<button onclick="turnOffAutocomplete()">Turn Off Autocomplete</button>
<button onclick="turnOnAutocomplete()">Turn On Autocomplete</button>
<button onclick="showStatus()">Show Status</button>
<p id="status"></p>
<script>
function turnOffAutocomplete() {
document.getElementById("username").autocomplete = "off";
document.getElementById("status").innerHTML = "Autocomplete is now OFF";
}
function turnOnAutocomplete() {
document.getElementById("username").autocomplete = "on";
document.getElementById("status").innerHTML = "Autocomplete is now ON";
}
function showStatus() {
var autocompleteValue = document.getElementById("username").autocomplete;
document.getElementById("status").innerHTML = "Current autocomplete setting: " + autocompleteValue;
}
</script>
</body>
</html>
In this example, you can toggle the autocomplete functionality and check its current status. Try typing in the username field, submitting the form, and then typing again to see autocomplete suggestions −
Input Text Autocomplete Property Username: [text input field] [Submit] Control the autocomplete feature using the buttons below: [Turn Off Autocomplete] [Turn On Autocomplete] [Show Status] (Status message appears here)
Example − Form with Multiple Fields
Following example shows how different autocomplete settings work with multiple input fields −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Autocomplete Fields</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Registration Form</h2>
<form action="/register.php" method="post">
<label for="fname">First Name:</label>
<input type="text" id="fname" name="firstname" autocomplete="on"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="on"><br><br>
<label for="ssn">SSN:</label>
<input type="text" id="ssn" name="ssn" autocomplete="off"><br><br>
<input type="submit" value="Register">
</form>
<button onclick="checkAutocomplete()">Check Autocomplete Settings</button>
<div id="results"></div>
<script>
function checkAutocomplete() {
var fname = document.getElementById("fname").autocomplete;
var email = document.getElementById("email").autocomplete;
var ssn = document.getElementById("ssn").autocomplete;
document.getElementById("results").innerHTML =
"<p><strong>Autocomplete Settings:</strong></p>" +
"<p>First Name: " + fname + "</p>" +
"<p>Email: " + email + "</p>" +
"<p>SSN: " + ssn + "</p>";
}
</script>
</body>
</html>
In this form, the first name and email fields have autocomplete enabled, while the SSN field has it disabled for security reasons. The button displays the current autocomplete settings for all fields −
User Registration Form First Name: [text input] Email: [email input] SSN: [text input] [Register] [Check Autocomplete Settings] (Autocomplete settings display here when button is clicked)
Browser Compatibility
The autocomplete property is supported by all major web browsers including Chrome, Firefox, Safari, and Edge. However, the actual autocomplete behavior may vary slightly between different browsers based on their implementation and user settings.
Common Use Cases
The autocomplete property is commonly used in the following scenarios −
Contact forms − Enable autocomplete for name and email fields to improve user experience.
Login forms − Enable autocomplete for username fields but consider disabling for password fields.
Sensitive data − Disable autocomplete for fields containing sensitive information like social security numbers or credit card details.
Search boxes − Enable autocomplete to show previous search queries.
Conclusion
The HTML DOM Input Text autocomplete property provides control over browser autocomplete functionality for text input fields. Setting it to "on" enables automatic completion based on previous entries, while "off" disables this feature. This property is particularly useful for balancing user convenience with security and privacy requirements.
264 Views
