Jquery disable autocomplete in input

Question

I have this code:

The html:

<input id="register_username" type="text">
<input id="register_password" type="text">
<input id="register_repeatpassword" type="text">
<input id="register_email" type="text">

The Jquery:

$(document).ready(function(){
    $('#register_username').attr('autocomplete','off');
    $('#register_password').attr('autocomplete','off');
    $('#register_repeatpassword').attr('autocomplete','off');
    $('#register_email').attr('autocomplete','off');
    });

I want to disable the autocomplete feature offred by some browsers and acctually make the user type the entire field but the code is not working the dropdown menu still appear and the user still able to choose stuff the typed before. I also tried to user autocomplete="off" but nothing happened. What am I doing wrong here ?

[works on my machine](http://www.codinghorror.com/blog/2007/03/the-works-on-my-machine-certification-program.html)(tm) — Brad Christie, Dec 29 '12 at 02:28
For me the autocomplete="off" is being ignored on Chrome (v 41.0.2272.89), first I thought it was because I was changing the attribute via jquery after the page was loaded, but even inserting `autocomplete="off"` directly on the `input` did not solve the issue. This other [post](http://stackoverflow.com/questions/12374442/chrome-browser-ignoring-autocomplete-off) might be related to the issue. — Murilo Garcia, Mar 19 '15 at 14:39

score 34 · Answer 1 · answered Dec 29 '12 at 02:02

34

Just add:

autocomplete="off"

as attributes to the INPUT elements, f.ex:

<input autocomplete="off" id="register_username" type="text" name="username">

answered Dec 29 '12 at 02:02

David Hellsing

106,495
44
176
212

1

or the `
` node as well. (btw I believe the root problem is that it doesn't appear to work when applied post-load by jQuery since OP is adding this very attribute).
– Brad Christie Dec 29 '12 at 02:03
@MaxPain what browser? Can you post a fiddle? – David Hellsing Dec 29 '12 at 02:05

Carl Smith · Answer 2 · 2017-10-29T01:56:49.890

21

The jQuery version:

$("#register_username").attr("autocomplete", "off");

edited Oct 29 '17 at 01:56

answered Mar 07 '14 at 17:45

Carl Smith

3,025
24
36

1

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – Tenfour04 Mar 07 '14 at 18:09
It's the same as all the other answers, except that it uses jQuery, which is all it claims to do. – Carl Smith Aug 27 '17 at 21:33
The OP asked what was wrong with their own code, not for alternate methods of doing it. Some of the other answers are not answering the OP's question either, but the reviewer queue doesn't present all answers to be reviewed at once. – Tenfour04 Aug 27 '17 at 21:50
2

Anyway, that was three years ago...Today I wouldn't bother commenting on something like this since it's still helpful to people. :) – Tenfour04 Aug 27 '17 at 21:56

score 11 · Answer 3 · answered Apr 25 '19 at 18:33

11

in case someone comes here looking for how to turn off their jquery autocomplete:

$("#elementId").autocomplete({
  disabled: true
  });

answered Apr 25 '19 at 18:33

Jar

1,766
1
21
27

3

Thank you for this suggestion. Trying $("#id").attr("autcomplete", "off") or with false, or some other value didn't work but your solution did. – cminus Nov 04 '19 at 19:25
Awesome be sure to give it a like! – Jar Nov 04 '19 at 20:28

score 6 · Answer 4 · answered Dec 29 '12 at 07:58

6

check this fiddle out

 document.getElementById("register_username").autocomplete="off"

answered Dec 29 '12 at 07:58

rajesh kakawat

10,826
1
21
40

score 4 · Answer 5 · answered Dec 29 '12 at 02:11

Though I agree, autocomplete="off" should be widely supported and is the end solution, it not working may be a result of the HTML5 spec on the autocomplete attribute:

The autocompletion mechanism must be implemented by the user agent acting as if the user had modified the element's value, and must be done at a time where the element is mutable (e.g. just after the element has been inserted into the document, or when the user agent stops parsing).

That, to me, implies it should be an 'original' attribute of the element, and cannot be added post-render. And since most browsers are implementing the new spec¹, chances are if they allowed it with javascript before they've probably corrected the implementation based on the above spec.

If you haven't already, try adding the attribute directly to the controls instead of relying on jQuery doing so on [presumably] document ready.

¹ I use spec losely here since HTML5 isn't a standard, but a lot of browsers are implementing some of the more concrete features. Since autocomplete has been around since IE5, it's probably one of those ones you can consider a safe implementation.

@MaxPain: By any changes, if you go to `about:config` is [Wallet.crypto.autocompleteoverride](http://kb.mozillazine.org/Wallet.crypto.autocompleteoverride) set? — Brad Christie, Dec 29 '12 at 02:20
@MaxPain: Plainly put, there are add-ins to FF that can force it to remember passwords despite preferences set by the webmaster (e.g. setting `autocomplete="off"`). I was just checking to make sure that wasn't the case. — Brad Christie, Dec 29 '12 at 02:26

score 4 · Answer 6 · answered Apr 04 '18 at 04:59

4

Now a days you need change "off" to another random string like "nope":

Jquery:

$("#register_username").attr("autocomplete", "nope");

HTML:

<input id="register_username" type="text" autocomplete="nope">

answered Apr 04 '18 at 04:59

Cava

5,346
4
25
41

score 2 · Answer 7 · answered Apr 27 '15 at 12:24

<form id='myForm'>
    <input id="register_username" type="text">
    <input id="register_password" type="text">
    <input id="register_repeatpassword" type="text">
    <input id="register_email" type="text">
</form>
$(document).ready(function(){
    $('#myForm').on( 'focus', ':input', function(){
        $(this).attr( 'autocomplete', 'off' );
    });
});

score 1 · Answer 8 · answered Apr 23 '19 at 16:01

Working as of April 23rd 2019.

If you want to disable Chrome's autofill on everything on your page, especially if you don't use forms but rather serialized jquery selectors to submit your data.

Doing it at runtime had the best results for me, and Chrome will autofill on runtime anyways, so it's a justifiable solution to counter Chrome's behavior.

Simply add this at the bottom of your code and Chrome won't try to force auto-fill things:

<script>
    $(document).ready(function () {
        $("input").attr("autocomplete", "new-password");
    });
</script>

Not working: Chrome 75.0.3770.142. It only works if you put the autocomplete='off' attribute directly on the input element. Every manipulation via js later on is simply ignored. — okieh, Jul 17 '19 at 13:57

score 1 · Answer 9 · answered Oct 15 '20 at 21:28

For anyone still struggling with this issue, this combination of solutions is the ONLY thing that worked for me. Based on this script: https://github.com/terrylinooo/jquery.disableAutoFill

<form id="myForm">...</form>

Put these in the footer of your page:

    <script src="https://cdn.jsdelivr.net/npm/disableautofill/src/jquery.disableAutoFill.min.js"></script> 
    
<script>
        $(document).ready(function () {
            $("input").attr("autocomplete", "new-password");
            $('#myForm').disableAutoFill();
        });
    </script>

score 0 · Answer 10 · answered Feb 16 '18 at 21:34

Using jQuery, I do this in a layout page, or a bit of HTML that will be present on every page of the website.

$(document).ready(function () {

        //when the page is done loading, disable autocomplete on all inputs[text]
        $('input[type="text"]').attr('autocomplete', 'off');

        //do the same when a bootstrap modal dialog is opened
        $(window).on('shown.bs.modal', function () {
            $('input[type="text"]').attr('autocomplete', 'off');
        });
});

Jquery disable autocomplete in input

10 Answers10

Linked