Disable HTML form input autocomplete and autofill

disable-html-form-input-autocomplete-autofill.md

Disable HTML Form Input Autocomplete and Autofill

1. Add autocomplete="off" onto <form> element;
2. Add hidden <input> with autocomplete="false" as a first children element of the form.

<form autocomplete="off" method="post" action="">
    <input autocomplete="false" name="hidden" type="text" style="display:none;">
    ...

This formation is going to prevent Chrome and Firefox to offer autofill and autocomplete for all input fields inside the form.

My form is in Wordpress Elementor, I used this HTML code for a long time to stop the autocomplete of the number field.

But as incredible as it may seem, it only works when there are only 2 fields on the form, as soon as I add the email field, the field: name returns to autocomplete.

my code for elementor!

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Função para aplicar configurações ao campo
        function applySettings() {
            let gtmwhatsapp = document.getElementById('form-field-gtmwhatsapp');
            if (gtmwhatsapp) {
                gtmwhatsapp.minLength = 15;
                gtmwhatsapp.maxLength = 15;
                gtmwhatsapp.pattern = "\\(\\d{2}\\) \\d{5}-\\d{4}";
                gtmwhatsapp.title = "Adicione o número corretamente. Ex: (63) 9 9999-9999";

                gtmwhatsapp.addEventListener('input', function () {
                    // Remove todos os caracteres não numéricos
                    gtmwhatsapp.value = gtmwhatsapp.value.replace(/\D/g, '');

                    // Adiciona formatação "(xx) xxxxx-xxxx"
                    if (gtmwhatsapp.value.length >= 11) {
                        gtmwhatsapp.value = gtmwhatsapp.value.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3");
                    }
                });

                const form = gtmwhatsapp.form;
                if (form) {
                    form.addEventListener('submit', function (event) {
                        if (!gtmwhatsapp.validity.valid) {
                            alert('Adicione o número corretamente');
                            event.preventDefault();
                        }
                    });
                }
                
                gtmwhatsapp.setAttribute('autocomplete', 'off');
                gtmwhatsapp.setAttribute('inputmode', 'numeric'); // Adiciona inputmode como numeric
            }
        }

        // Aplicar configurações ao carregar a página
        applySettings();

        // Evento específico do Elementor para detectar abertura do popup
        jQuery(document).on('elementor/popup/show', function() {
            applySettings();
        });
    });
</script>

This works for me!

The readonly attr with a onfocus function.

<input
readonly onfocus="this.removeAttribute('readonly');"
v-model="form.email"
type="text"
name="email"
id="email"
autocomplete="off"
/>

  input:-webkit-autofill {
    transition: background-color 5000s ease-in-out 0s;
  }

i'm using AngularJS and have this problem:
I have 4 inputs: Name, ProcessNumber, LicenseNumber and ExpirationDate, in this follow sequence.
if I fill in sequentially, no problem, but, if i fill the ExpirationDate first, the autocomplete="off" don't work. I've tried everything you sent in this trend, but, nothing works.

I found a very simple solution to the problem. I set the readonly attribute on the input fields, which prevents automatic filling. Then I remove the readonly attribute on the onfocus event, when the user clicks on the input field, it becomes writable.
<input name="email" onfocus="this.removeAttribute('readonly')" readonly type="text">

readonly

The problem was solved with the solution in the following comment above.

I'm using react, I included readOnly in the inputs, combined it with useEffect, addEventListener, removeEventListener and the 'focus' event. This way, the field is not filled automatically.

It also works if you remove the readOnly attribute in the window's load event:

<input type="password" readonly id="MyPasswordInput" name="MyPasswordInput"/>

$(window).load(function () {
    $("#MyPasswordInput").removeAttr('readonly');
});

Just to clarify, NO need to change or add anything to the username/login input...