How to remove auto-fill inputs?

Asked

Viewed 21,826 times

15

I have my email input/password. But always when typing an email that I have already saved login/password, the browser automatically fills in my form.

How to solve?

html

6 answers

21


  • In principle, the solution would be simple, to put the autocomplete="off" so much on the form how much in the input:

    <form name="meuform" id="meuform" method="post" autocomplete="off" action="">
<input type="text" name="batatinha" autocomplete="off">

    Remembering that autocomplete is HTML5, do not forget to work with the doctype correct at the top of the page:

    <!DOCTYPE html>

But as already stated in the comments and in other sources, not all browsers react the same way. For this, there are a number of outputs and technical repairs 1 to consider:

  • One is to add two fields hidden by CSS right at the beginning of the form:

    <form name="meuform" id="meuform" method="post" autocomplete="off" action="">
<input type="text" style="display:none">
<input type="password" style="display:none">

    Some browsers understand that by having two password fields, the form is password exchange, so ignore the autocomplete.

  • Another is to fill the form with "nothing" using JS or Jquery, for example:

    $(document).ready(function(){ $('input[type="text"], select').val('') });

  • Alternatively, you can randomize the names and ids form with some server-side language.

Considerations:

  • Some extensions and password managers completely ignore the attribute autocomplete.

  • Consider the usability, and the real reasons for disabling this function. You probably have a good reason to avoid the autocomplete, but don’t forget to think of all the pros and cons.

The other side of the coin:

For cases where you want the autocomplete in one field only (in browsers that respect the autocomplete, Sure, you can "hang up" on form whole and "connect" in the desired field:

<form autocomplete="off">
    <input name="username">
    <input name="password" type="password">
    <input name="another_field" autocomplete="on">

9

<input type="text" name="email" autocomplete="off" />
  • 1

    I put autocomplete in the whole form... and yet

  • 2

    +1. It is worth mentioning that autocomplete="off" works with any field of the type input, as well as textareas.

  • @Rod And yet what?

  • 1

    'Tip: In some browsers you may need to Activate an autocomplete Function for this to work (Look under "Preferences" in the browser’s menu)'. I’ve had trouble with it, if I’m not mistaken in Firefox.

  • 1

    @Rod try applying directly on <form>, that is to say <form autocomplete="off"

  • I applied it to the form, not the input, and yet it keeps filling in the values...

Show 1 more comment

1

I noticed the following, in internet explorer does not work right, added an additional action:

<input type="text" id="matricula" placeholder="Matrícula" name="mat" required
    autofocus autocomplete="off" readonly onfocus="this.removeAttribute('readonly');this.select();" />

<input type="password" id="senha" placeholder="Senha" name="pass" required
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');this.select();" />

I saw no need for onBlur event, worked perfectly, tested, but there was no effect, as I develop also for mobile, the operation occurred normally.

I still went further, using jquery, managed to maintain the natural color of the field, which is usually white, with the following command:

$("#matricula").css('background-color', '#ffffff');
$("#senha").css('background-color', '#ffffff');

1

I went through the same problem, today 10/09/2019 the only solution I found was this

put 2 false inputs before your input

<input class="hidden" type="text" style="display: none!important; visibility: hidden!important;" ></input>
<input class="hidden" type="password" style="display: none!important; visibility: hidden!important;" ></input>

1

I decided as follows:

<input type="text" id="matricula" placeholder="Matrícula" name="mat" required
    autofocus autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" />

<input type="password" id="senha" placeholder="Senha" name="pass" required
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
    onBlur="this.setAttribute('readonly', true);" />

I hope I’ve helped.

-3

It worked for me:

autocomplete="none"

Using in the Ionic5

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.