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.

Just wanted to chime in here for those of you who want to remove the email autofill as well;

Create an SVG for your Email label text instead of using actual text.
Change the label to 'Nope' and basically just hide it with z-index and absolute positioning.
Set Input type, name and autoComplete to 'Nope'.

          <div className="mb-4">
            <svg width="40" height="28" xmlns="http://www.w3.org/2000/svg">
              <text x="0" y="16" fontSize="14" fill="white" fontWeight="bold">
                Email:
              </text>
            </svg>
            <label className="absolute -z-10">Nope</label>
            <input
              type="nope"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              name="nope"
              autoComplete="nope"
              required
              className="w-full rounded-lg border px-3 py-2 shadow-sm focus:outline-none focus:ring focus:ring-blue-200"
            />
          </div>

This works for me in my React project, testing on the latest Chrome browser.

If you want a true fix, please go mark as impacted here. This needs attention from the Chromium dev team.

Everything in this thread is a hack to work around it, and is likely to break or cause bugs in your application down the line. Better to get it fixed at the source, no?

These workarounds are also be very misleading for Jnr developers. :(

This still working in Chrome:
Using a non-standard value may trick the browser into not automatically filling in the field.

<input type="text" autocomplete="new-text" />
<input type="number" autocomplete="new-number" />
<input type="password" autocomplete="new-password" />

Hi @valentimmx, please also drop your comment here: https://issues.chromium.org/issues/40910184?pli=1

Mark yourself as impacted. This needs attention from the Chromium dev team for a proper fix.

I hope this could be helpful for someone:
form structure:

• name
• email
• phone
• billing address // <== I had a problem here, where it was auto-suggesting email address autocomplete
• password

I tried all of the above but with no luck, then
when I change the form to:

• name
• email
• password // moved it up
• phone
• billing address // <== auto suggestions stoped 🫨

chrome 128.0.6613.138

None of these works for me. Feels like you have to hack it up by adding read only and later remove after rendering the component. This is stupid....

Couldn’t agree more @tlevivsoft, would you mind sharing your frustrations with the Chromium team here? https://issues.chromium.org/issues/40910184?pli=1

Better yet, mark yourself as affected. More traction we can get on the ticket the better.

@rawaby88 you too if you’re open to it please

None of these works for me either.
The only thing I have seen is that when you remove the name AND id, the input text doesn't show suggestions. For me, that's enough, but it isn't sufficient for all uses.

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...