Home / Questions / 129057
Accepted
Norak
Asked: 2020-01-06 04:24:28 +0800 CST 2020-01-06 04:24:28 +0800 CST

Prevent Chrome autocomplete form, autocomplete="off" on input doesn't work

  • 772

Hello everyone, I'm having problems with Google Chrome and autocomplete. I want some fields of my form not to be autocompleted and I have added the attribute:autocomplete="off"

This in Chrome is not working, but in other browsers like Firefox it is. How can I prevent only some fields from being filled in?

I have seen on the internet as an alternative solution to add autocomplete="off"to the label <form>, but this does not work for me, since I would like many fields to be autocompleted...

<form id="formulario" action="" method="">
<input type="text" name="nombre" placeholder="Nombre..." />
<input type="text" name="apellidos" placeholder="Apellidos..." />
<input type="email" name="email" placeholder="Correo electrónico..." />
<input type="text" name="codigo" placeholder="Código promocional..." autocomplete="off" />
</form>

How do I prevent a single input field from autocompleting in Chrome?

formularios

4 Answers

  1. Best Answer

    Because the Google Chrome autocomplete problem is quite well known and has been discussed on numerous forums by users who have had this problem, a kind of "patch" (if you can call it that) has been created to fix what chrome has forbidden. By default it is configured to ignore the command to disable autocomplete ("autocomplete=off"). This "patch" that solves your problem is shown by @sergibarca in his answer.

    As a complement I should add that you could well make chrome try to look for a non-existent code by setting the autocomplete of the input in question to a value that you know will never exist in the field. This way, chrome won't be able to show you any autocomplete options because it can't find one that matches the autocomplete.

    This is achieved in your case like this:

    <input type="text" name="codigo" placeholder="Código promocional..." autocomplete="ÑÖcompletes" />

    Hardly chrome will find autocomplete something that matches "ÑÖcompletes" . Of course, you can change this value to something that looks more elegant or that suits you better.

    References:

    For the patch. Here!

    For autocomplete with nonexistent value: Here!

    To see both responses to a problem similar to yours: Here

    Bonus, it happened to Mozilla too! Here!

    That is all. A greeting

    • 7

  2. After reviewing several pages with answers with codes in JS, JQuery and others, I found among so many options that this worked for me today (08-20-2019).

    I omitted to add autocomplete="off" in the FORM tag and in each INPUT of type TEXT I used autocomplete="new-text":

    <input type="text" name="nombre" autocomplete="new-text">

    While in each INPUT of type PASSWORD:

    <input type="password" name="clave" autocomplete="new-password">

    I didn't need to use other types of fields in my form, but following the same logic, I imagine that the NUMBER type should be changed to "new-number" and so on according to each type.

    I hope you save the afternoon like me, greetings!

    • 2

  3. What you could do is create an input that captures the hidden auto complete with CSS.

    Example

    <input style="display:none" type="text" name="falsocodigo" autocomplete="off" />

<input type="text" name="codigo" placeholder="Código promocional..." autocomplete="off" />

    • 1

  4. After trying many options, this is the only one that has worked for me in Chrome:

    <input type="text" name="nombre" autocomplete="new-text">

    It also works with an angular or ionic component.

    <ion-searchbar autocomplete="new-text"></ion-searchbar>
    • 0