Disable Chrome Autofill creditcard

Question

I have two fields in my form which Chrome falsely identified as credit card numbers (one is for a phone number and one is for a fax number). There are also two fields for firstnames which Chrome thinks are fields for credit card names and want to autofill. Is there some attribute I can use on these elements to tell Chrome that they are in fact not related to a credit card?

I've tried setting autocomplete="false" on the inputs. This removed the autofill options for address/contact information, but the credit card option was still there.

Typhon

Answer 1

I finally found a workaround! Set the autocomplete attribute as "cc-csc". That value is the CSC of a credit card and they are no allowed to store it! (for now...)

autocomplete="cc-csc"

Tricycle

this mostly works. It stops chrome from trying to autofill credit card numbers, but it's still trying to autocomplete with text that I have typed previously into other inputs. It uses the name and id properties on the inputs to determine what values to suggest. In order to fix this, make sure all the inputs are wrapped in a <form> tag that has autocomplete="off" on it – Linkage

@Tricycle OMG you have no idea how long was I searching for a workaround for stupid Chrome to stop filling in my credit card details in the input fields. You have my utmost gratitude! – Vierno

Thanks Peter for your help, it works perfect! – Peterpeterborough

Answer 2

Have you tried:

autocomplete="nope"

At first glance this may look silly but ...

In some cases, the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really forcing the no-autocompletion is to assign a random string to the attribute --- https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Ohare

Unfortunately doesn't work anymore. I did a little research and found that only end user accomplish this by entering somewhere in the chrome settings. 😏 – Buryat

Answer 3

I had the same issue and solved the problem by changing:

<input type="text" ...>

To

<input type="email" ...>

This will add the "@" on the user keyboard, but no problem.

Or

<input type="search" ...>

This will change the "confirm button" on the user keyboard to the "search button". It is less intuitive than the previous solution.

Groundling

Answer 4

Chrome requires at least one input with autocomplete="on" attribute to use 'off' with others. So you can do a trick:

<input autocomplete="on" style="opacity: 0; position: absolute; pointer-events: none">
<input autocomplete="off" type="text">
...

Ecosystem

Answer 5

I had the same issue and ended up going with this:

<input
  type="search"
  enterkeyhint="go"
/>

type="search" was the only one that seemed to work for me (taken from José's answer).

enterkeyhint="go" removes the search or magnifying glass from the "enter" button on virtual keyboards.

Twinkling