Prevent chrome from autofilling creditcard info

14
votes

I have a <input type="text" name="quantity" /> on my checkout form, and somehow Chrome thinks that this field is a credit card expiration month.

Once a user starts typing in his name (into another field), Chrome offers to fill in the CC info but when the user clicks on it, Chrome fills my quantity -<input> with the expiration date.

I've tried every possible workaround including:

  • autocomplete="off" (doesn't work in Chrome completely)
  • setting the autocomplete="new-password" (doesn't work for CC-autocomplete)

PS. if you're considering marking this question as "duplicate" please note that I specifically talk about credit-card autocomplete, not your usual autofill.

3
htmlgoogle-chromeautofill
Possible duplicate of Disable autofill on a web form through HTML or JavaScript? – jeremykenedy
@developernator like I indicated in the question, it's not a usual autocomplete, it's a "saved credit card" autocomplete. – jazzcat
Can you provide a more complete code sample then please :) – jeremykenedy
Did you ever find a solution for this? I just run into this exact same issue. And for anyone else ending up here, autocomplete="off" doesn't work. – Anders Bergquist
Any update on this, I'm trying to fix this too, but not working for me! :( – jayM

3 Answers

0
votes

Add autocomplete="nope", to your input tag if you don't want it to auto-populate with anything. The browser will try to process it and since nope is not an acceptable option for it the browser will give up on processing it.

See - https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Disabling_autocompletion.

0
votes

The only solution I found that is actually working with chrome 89.0.4xxxx

<input style="display: none;" autocomplete="cc-csc"/>

How is this solution intended to work: Basically, we give an alternative for chromium browsers to match by a specific autocomplete key (cc-csc) and not one that is more generic (number) by name or other secondary looked-up data.

You can find details on the topic here

Here you can find a fixed example, comment out line with the fix to compare: https://jsfiddle.net/bogdanm/sj0ewfqv/7/

-1
votes

I know this question has already been answered, but I'm going to put my two cents in anyway.

Another way to do this(as far as I know), is when making the <input> fields in your HTML document, just don't add the type="ipsum dolor amet" argument. Then Chrome, or any other browser, won't know what's what and will stay out of it.