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

Question

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:

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.

score 0 · Accepted Answer · answered Aug 23 '18 at 08:32

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.

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

1 Answers1