Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to disable browser autofill on input fields using jQuery?
In this article, we will learn how to disable the browser autofill feature on input fields with the help of jQuery, and the “autocomplete” attributes provided by the “input” HTML tag.
Browser autocomplete is a feature that suggests the past values entered and submitted into the forms. By default, autocomplete is enabled in the browsers, so when the user clicks on an input, the suggestions are visible for that input value, and the user can directly pick any of the suggestions to autofill the content.
To disable this behavior, we will see 2 approaches that utilize the jQuery library and the “autocomplete” attribute available in the “input” HTML element.
Approach 1
In this approach, we will use the “attr” jQuery method on an input HTML element to pass it an attribute “autocomplete” of value “off”, so as to disable the autofill feature on that input element.
Example
Let’s check the above approach with the help of an example −
<html lang="en">
<head>
<title>How to disable browser autofill on input fields using jQuery?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h3>How to disable browser autofill on input fields using jQuery?</h3>
<form id="form">
<label for="email">Email (With Autocomplete)</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name (Without Autocomplete)</label>
<input type="text" name="firstName" id="firstName" autocomplete="off" />
<br />
<label for="lastName">Last Name (Without Autocomplete)</label>
<input type="text" name="lastName" id="lastName" autocomplete="off" />
<br />
<input type="submit" value="Submit" />
<script>
$(document).ready(function () {
$("#firstName").attr("autocomplete", "off");
$("#lastName").attr("autocomplete", "off");
});
</script>
</form>
</body>
</html>
Approach 2
In this approach, we will use the “prop” jQuery method on an input HTML element to pass it a prop “autocomplete” of value “off”, so as to disable the autofill feature on that input element.
Example 1
Let’s check the above approach with the help of an example −
<html lang="en">
<head>
<title>How to disable browser autofill on input fields using jQuery?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h3>How to disable browser autofill on input fields using jQuery?</h3>
<form id="form">
<label for="email">Email (With Autocomplete)</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name (Without Autocomplete)</label>
<input type="text" name="firstName" id="firstName" autocomplete="off" />
<br />
<label for="lastName">Last Name (Without Autocomplete)</label>
<input type="text" name="lastName" id="lastName" autocomplete="off" />
<br />
<input type="submit" value="Submit" />
<script>
$(document).ready(function () {
$("#firstName").prop("autocomplete", "off");
$("#lastName").prop("autocomplete", "off");
});
</script>
</form>
</body>
</html>
Example 2
In this example, we disable the autofill browser feature by temporarily changing the type attribute of the email input field when it is focused.
Filename: index.html
<html lang="en">
<head>
<title>How to disable browser autofill on input fields using jQuery?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h3>How to disable browser autofill on input fields using jQuery?</h3>
<form id="form">
<label for="email">Email (With Autocomplete)</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name (Without Autocomplete)</label>
<input type="text" name="firstName" id="firstName" autocomplete="off" />
<br />
<label for="lastName">Last Name (Without Autocomplete)</label>
<input type="text" name="lastName" id="lastName" autocomplete="off" />
<br />
<input type="submit" value="Submit" />
<script>
$(document).ready(function () {
$("#firstName").prop("autocomplete", "off");
$("#lastName").prop("autocomplete", "off");
});
// Additional example: Temporarily changing the type attribute
$("#email").focus(function () {
$(this).prop("type", "text");
$("[type='text']").prop("autocomplete", "off");
});
$("#email").blur(function () {
$(this).prop("type", "email");
$("[type='text']").prop("autocomplete", "on");
});
</script>
</form>
</body>
</html>
Conclusion
In this article, we learned how to disable the default browser autofill behavior on input fields using jQuery, with the help of 2 different approaches, and 3 examples. In the first approach, we applied the “autocomplete” property on the “input” tag using jQuery attr method, and in the second approach, we applied the “autocomplete” property on the “input” tag using the jQuery prop method.
488 Views
