CODEWITHSUNDEEP
htmlcssforms
David
David

Reputation: 3723

Disable autocomplete via CSS

Is it possible to use CSS to disable autocomplete on a form element (specifically a textfield)?

I use a tag library which does not permit the autocomplete element and I would like to disable autocomplete without using Javascript.

Upvotes: 124

Views: 181250

Answers (11)

Sina Abedi
Sina Abedi

Reputation: 2381

There are 3 ways to that, i mention them in order of being the better way...

1-HTML way:

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

2-Javascript way:

document.getElementById("input-id").getAttribute("autocomplete") = "off";

3-jQuery way:

$('input').attr('autocomplete','off');

Upvotes: 3

Kusukacoklat
Kusukacoklat

Reputation: 41

I just use 'new-password' instead 'off' on autocomplete.

and I also have try using this code and works (at least on my end), I use WP and GravityForm for your information

$('input').attr('autocomplete','new-password');

Upvotes: 4

Andrew
Andrew

Reputation: 3381

You can't use CSS to disable autocomplete, but you can use HTML:

<input type="text" autocomplete="false" />

Technically you can replace false with any invalid value and it'll work. This iOS the only solution I've found which also works in Edge.

Upvotes: -1

Webdma
Webdma

Reputation: 714

I solved the problem by adding an fake autocomplete name for all inputs.

$("input").attr("autocomplete", "fake-name-disable-autofill");

Upvotes: 2

QMaster
QMaster

Reputation: 3904

I tried all suggested ways from this question answers and other articles in the web but not working anyway. I tried autocomplete="new-random-value", autocomplete="off" in form element, using client-side script as below but outside of $(document).ready() as one of the user mentioned:

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

I found maybe another priority in the browser cause this weird behavior! So I searched more and finally, I read again carefully below lines from this good article:

For this reason, many modern browsers do not support autocomplete="off" for login fields:

If a site sets autocomplete="off" for a , and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page. If a site sets autocomplete="off" for username and password fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page. This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).

If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent auto-filling of password fields, you can use autocomplete="new-password"; however, support for this value has not been implemented on Firefox.

It's just worked. I tried in chrome specially and I hope this continues working and help others.

Upvotes: 4

TrampGuy
TrampGuy

Reputation: 1737

Thanks to @ahhmarr's solution I was able to solve the same problem in my Angular+ui-router environment, which I'll share here for whoever's interested.

In my index.html I've added the following script:

<script type="text/javascript">
    setTimeout(function() {
        $('input').attr('autocomplete', 'off');
    }, 2000);
</script>

Then to cover state changes, I've added the following in my root controller:

$rootScope.$on('$stateChangeStart', function() {
                $timeout(function () {
                    $('input').attr('autocomplete', 'off');
                }, 2000);
            });

The timeouts are for the html to render before applying the jquery.

If you find a better solution please let me know.

Upvotes: 0

Ernest
Ernest

Reputation: 1468

If you're using a form you can disable all the autocompletes with,

<form id="Form1" runat="server" autocomplete="off">

Upvotes: 20

Christopher Klewes
Christopher Klewes

Reputation: 11435

You can use a generated id and name everytime, which is different, so the browser cannot remember this text-field and will fail to suggest some values.

This is at least the cross browser safe alternative, but I would recommend to go with the answer from RobertsonM (autocomplete="off").

Upvotes: 61

ahhmarr
ahhmarr

Reputation: 2320

you can easily implement by jQuery

$('input').attr('autocomplete','off');

Upvotes: 54

RobertsonM
RobertsonM

Reputation: 1539

As it stands, there is no 'autocomplete off' attribute in CSS. However, html has an easy code for this:

<input type="text" id="foo" value="bar" autocomplete="off" />

If you're looking for a site-wide effector, an easy one would be to simply have a js function to run through all 'input' s and add this tag, or look for the corresponding css class / id.

The autocomplete attribute works fine in Chrome and Firefox (!), but see also Is there a W3C valid way to disable autocomplete in a HTML form?

Upvotes: 152

Sampson
Sampson

Reputation: 268326

CSS does not have this ability. You would need to use client-side scripting.

Upvotes: 13

Related Questions