Search code examples
htmlautocompletethymeleafcredit-cardautofill

html/thymeleaf - How to prevent input field detected as credit card related fields?

Chrome detects some input fields as credit card fields. How do I avoid it in HTML?

It seems that Chrome will detect such fields using some regex on field names etc (see: here).

The only known solution for me right now is to rename the field.
I have tried using autocomplete="off" and autocomplete="new-password".
Is there any HTML attributes or tricks that can avoid this?


Screenshot:

screenshot


The Thymeleaf code for the input field:

<td class="report-form-td2">
    <input class="calendar2 input-s" type="text" 
        placeholder="dd-mm-yyyy" 
        th:field="*{dateStr}"
        maxlength="10" autocomplete="off"/>
</td>

Which transforms to this HTML:

<td class="report-form-td2">
    <input class="calendar2 input-s" type="text" 
        placeholder="dd-mm-yyyy" 
        id="dateStr" name="dateStr"
        maxlength="10" autocomplete="off"/>
</td>


Thank you.

Solution

  • Apparently, This behavior is due to the use of placeholder='dd-mm-yyyy'. Google will detect it as a CC field.

    Temporary Workaround:
    Removing the placeholder.

    Extra Tips:
    Therefore, changing the input id/name attribute will not help in the case of this. But if the field is using id/name like mercId, mercName, renaming them will help.