Prevent Chrome and Firefox auto-filling password

By Dillon Smart · · · 1 Comments

Chrome Browser

Do you have a user management page where users are able to update their account passwords? Do you have form validation that checks a password field against a confirmation password field but the validation fails because the browser has auto-filled the values? In this article, you will learn how to prevent Chrome and Firefox from auto-filling password inputs.

Modern browsers by default remember information that users submit through input fields on websites. By doing this the browser is able to offer the user a better experience by auto-completing tedious forms. However, this can cause a problem when it comes to user management pages. Below I have outlined an example where this can be a problem.

Example scenario

You have built an application where users are able to register, log in and manage their account information. On the account information page, you have a number of fields visible to the user, and a few which are hidden. Name, Email, a button labeled “Change Password”, and a submit button. The hidden fields are Password and Password Confirmation. If the user does not want to change their password, they simply do not click the change password button, however, if they do click the change password button, the Password and Password Confirmation fields are made visible.

Autofill Password

Modern browsers will ignore the hidden password input and auto-fill the value, causing the password value and password confirmation value to no longer match and treat this as the user is updating their password when in reality they are only updating their name.

As you can see, auto-filling the password field in the above example can cause a number of usability issues and may even drive you to re-think the UI of the application.

Prevent Chrome and Firefox auto-filling password

Autocomplete = off !

Autocomplete works for all input fields other than inputs with the type “password”.

Autocomplete = new-password

Using the new-password value for the Autocomplete attribute is the best method to prevent Chrome and Firefox from auto-filling passwords. Most modern browsers support this value however it is up to the browser whether or not to respect this. Below is an example password input that uses the autocompleted=”new-password” attribute.

<input type="password" name="password" autocomplete="new-password" />

An alternative solution would be to move the password fields away from the main user management form and add the new password form to another page.

FirefoxGoogle ChromeInternetWeb

1 Comment



Was this helpful? Leave a comment!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

What is an IP Address and how to find yours

Updated 16th August 2022

You may have heard the term “IP Address” and not sure what it actually means. In this article you’ll learn what an IP Address is and how to find yours. In short, an IP Address is a unique string of characters that identifies a device over a network. Every device that connects to an internet

How to exclude an IP Address from Google Analytics

Updated 16th August 2022

Google Analytics is a great tool for tracking your website traffic, analyzing trends, and seeing the fruits of your labor if you’re currently trying out a new marketing strategy. However, if you’re like me and on your website a lot, the last thing you want is to unintentionally pollute your Google Analytics data. In this