DevelopmentStop browser from filling in form fields with the autocomplete feature

Stop browser from filling in form fields with the autocomplete feature

To be helpful, browsers will cache information you enter in a form field. Then when you comeback and start typing, the same information will pop up near the field so you can click it to have it auto-entered for you. While this is useful, there are times you don’t want this behavior — like a one-time PIN number or CVC code for credit card payment.

Thankfully, there is an easy fix. On either the form itself or the specific fields you wish to stop this behavior, you can add the autocomplete property and set the value to “off“.

autocomplete="off"

On the form itself

<form method="post" action="/form" autocomplete="off">
     ...
</form>

or

On just an input field

<form method="post" action="/form">
  ...
  <div>
    <label for="ssn">Social Security Number</label>
    <input type="text" id="ssn" name="ssn" autocomplete="off">
  </div>
</form>

This accomplishes 2 things. It tells the browser not to save the data for use later. And it stops the browser from caching the data in session history.

This will work with most modern browsers….with one exception. Most modern browsers will not comply with the autocomplete=”off” for login fields; whether on the form or a field itself. It has to do with the way browsers handle password saving/creating internally. So just keep that in mind.

Browser compatibility

Data on support for the input-autocomplete-onoff feature across the major browsers from caniuse.com

For more information:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Categories: Development Tags: , ,