Many web browsers save user input data for forms and autocomplete it to re-populate the form, in case the user happens to use the same form again. This is especially true for login pages of websites. Often you may not want the web browser to save your form data and would like your website visitors to re-enter them manually every time. In this article, we will learn how to disable browser autofill using JavaScript.
How to Disable Browser AutoFill Using JavaScript
Please note, if you add the following codes to your website’s web pages, it will only prevent the browser from storing form data entered on your website’s forms, but not other websites.
You can easily disable autocomplete for the entire form, or specific input elements by adding autocomplete=’off’ for it. Here is an example to disable autofill for all input fields of an entire form.
<form autocomplete="off"> ... </form>
Here is an example to disable autofill for a single input field.
<input autocomplete="off" type="text" />
Please note, you can also use this attribute on hidden input elements. Autocomplete attribute works with the following types: text, search, url, tel, email, password, datepickers, range, and color.
When you set the autocomplete attribute to off, it tells the browser not to store user input data for that forms, in case the user tries to refill the same form.
It also tells the browser not to save the form input data in session history, so that it is not displayed even after the user has submitted the form, and clicked back button to revisit the form.
Of course, some browsers ignore this for specific input forms. For example, Firefox 30 ignores this attribute and continues to prompt the user to save password in the client browser.
Also, if the above attribute value is not working on your web browser, you can try any of the following variations, they all disable autocomplete.
autocomplete = "new-password" OR autocomplete = "new" OR autocomplete = "nope"
Often web servers serve cached copies of web pages, and even web browser load cached copies of pages from their local storage. So please make sure to invalidate the web server cache if your have recently made the above changes on your web page. Also, ask your website visitors to clear their browser cache and reload the page, or hit F12 to do the same.
We have seen the HTML way to disable autocomplete in your web page. If you want to do it via JavaScript, just add the following code to your web page. Here is an example to disable autocomplete on all input fields using JQuery.
<script>
$(document).ready(function() {
$('input').attr('autocomplete', 'off');
});
</script>
Here is a code to disable autocomplete on input fields with type=text.
<script>
$(document).ready(function() {
$("input[type='text']").each(function() {
$(this).attr("autocomplete", "off");
});
});
</script>
In this article, we have learnt several ways to disable autocomplete and autofill on your web page’s form fields. Please note, even though we set the autocomplete attribute of form elements to off, the actual implementation varies from browser to browser. The above steps should work in most Firefox, Chrome and Edge web browsers.
Also read:
How to Stop Browser Back Button Using JavaScript
How to Disable Clicks in IFrame Using JavaScript
How to Prevent Web Page from Being Loaded in IFrame
How to Replace Values in Pandas DataFrame
How to Add New Column to Existing DataFrame