How to remove autocompletion of inputs?

Question

How to remove autocompletion of inputs?

Navigation

#1 by (12 votes)
#2 by (7 votes)
#3 by (0 votes)
#4 by (0 votes)

11

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

How to solve?

html

asked by anonymous 22.09.2014 / 22:01

4 answers

7

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

22.09.2014 / 22:03

0

I solved it 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 have helped.

03.08.2017 / 14:16

0

I noticed the following, in internet explorer does not work right, I added one more 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 did not see the need for the onBlur event, it worked perfectly, I tested it, but there was no effect, as I also developed for mobile, the operation was normal.

I still went further, using jquery, I 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');

31.08.2017 / 15:32

How does the relation between the same table work How can I send an email through GMail?

score 12 · Accepted Answer

In principle, the solution would be simple, put autocomplete="off" in form and 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 correct doctype at the top of the page:
```
<!DOCTYPE html>
```

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

One of them is to add two hidden CSS fields 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-changing, so they ignore 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 id s of the form with some server-side language.

Considerations:

Some extensions and password managers completely ignore the autocomplete attribute.
Consider the usability, and the real reasons for disabling this function. You probably have a good reason to avoid autocomplete , but do not forget to think about all the pros and cons.

The other side of the coin:

For cases where you want to autocomplete in a single field (in browsers that respect autocomplete , of course, you can "hang up" on form all and "on" in the desired field :

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