'How to avoid browser considering my inputs as credit card numbers? (they are not!)

In one of my webpages, Chrome is considering some number inputs as credit card numbers, and they are not, and I don't want users thinking I'm asking them such information. They are interval numbers, I never told the browser they were CC numbers, in fact I'm doing everything I can to ask the browser NOT to autocomplete.

inputs being shown as credit card dates

If I proceed, my credit card whole number goes into both inputs.

credit card numbers into inputs

To be clear: I know I can take off my own credit cards from Chrome options. That wouldn't be a solution. My clients are the ones who use this page and my concern is about THEIR experience.

I want those inputs to be treated as normal numeric inputs and G-Pay to stay away from them.

Any idea will be appreciated! Thank you.

**IMPORTANT EDIT **

This is crazy. I've been emptying the code until the very minimum. And still happens! The crazy is: I cannot delete the "select", or change the ID (it has to contain "numero", which means "number" in spanish), nor change the span, not even delete the "fecha" id (which means "date"). If I do any of those things, it stops considering credit number.

Behold! Run the snippet, click on the inputs and be amazed! :D

<select id="fecha">
</select>

<div>
<span>numero</span>
    <div>
        <input type="number">
        <input type="number">
    </div>  
</div>
htmlgoogle-chromeautocompletecredit-card


Solution 1:[1]

Seems like a browser bug

The cause is a known issue in our form parsing of credit card forms. It has already been fixed, but unfortunately we're currently blocked rolling it out. You can enable it explicitly if you run Chrome with the following command line flag: --enable-features=AutofillStrictContextualCardNameConditions

https://bugs.chromium.org/p/chromium/issues/detail?id=1219996

Solution 2:[2]

Your problem is similar to something where camp of text contents fraction what "Fecha" and "numero".

the solution is replace char for and charref https://dev.w3.org/html5/html-author/charref

example:

<span>numer&#1086;</span><!--one char-->

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 vanowm
Solution 2

Related Questions