Chrome provides no way to disable credit card autofill

This is going to be just a short article that I write as a way to protest to this annoying behavior in Chromium based browsers (Chrome, Edge, others?).

Introduction

Well you must be used to autocomplete credit card information in your browser, and indeed it is a very useful feature.

Buggy detection of credit card fields

The issue is that the following form that just asks the user for a date and a number (in Spanish), will trigger the browser's credit card functionality because it thinks I'm asking the user for a credit card.

<form>
    <label>Fecha</label>
    <input type="text" name="Factura[fecha]">
    <label>Número</label>
    <input type="text" name="Factura[numero]">
</form>

So the algorithm is buggy. I'm not blaming the developers behind it because I'm sure it is complex but, they really need to consider if this is the best approach or they need to review how things work.

Workarounds to solving this incorrect credit card fields detection

Well basically you can solve it with some hacks either by renaming the field names or the text of the label as these two are being used somehow inside the credit card field detection logic.

Label based hack

This hack can be used ONLY if your input names do not contain the keywords, but only your labels do and so the labels are triggering the credit card menus.

<form>
    <label>Fecha</label>
    <input type="text" name="Factura[field1]">
    <label>Nú<span style="display:none">/</span>mero</label>
    <input type="text" name="Factura[field2]">
</form>

Input name based hack

<form>
    <label>Fe<span style="display:none">/</span>cha</label>
    <input type="text" name="other_input_name">
    <label>Nú<span style="display:none">/</span>mero</label>
    <input type="text" name="other_input_name_2">
</form>

So depending on the fields on your form, you can implement one hack or the other, the label one is less problematic as it does not mess with your field naming, but depending on the case you might need to change the field names too.

Bottom line: You can't have both "Fecha" and "Número" keywords combination inside your input names or labels.

I have submitted an issue here to ask for a better solution: https://issues.chromium.org/issues/339033226

The cover image comes from a Spanish invoicing software I'm working on: https://refactu.com/