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.

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"

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

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.

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">
...

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.