CODEWITHSUNDEEP
javascriptjqueryautocomplete
Max Pain
Max Pain

Reputation: 1237

Jquery disable autocomplete in input

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 ?

Upvotes: 32

Views: 106390

Answers (11)

Tambua Rex
Tambua Rex

Reputation: 27

in case someone still stcuk, i tried all the above methods and they didnt work but setting autocomplete to none on the input itself worked for me.

autocomplete="none"

Upvotes: 0

Alex Kushner
Alex Kushner

Reputation: 31

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>

Upvotes: 1

Jar
Jar

Reputation: 2030

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

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

Upvotes: 11

Wadih M.
Wadih M.

Reputation: 13462

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>

Upvotes: 1

Cava
Cava

Reputation: 5682

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">

Upvotes: 5

Francis Ducharme
Francis Ducharme

Reputation: 4987

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');
        });
});

Upvotes: 0

Carl Younger
Carl Younger

Reputation: 3080

The jQuery version:

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

Upvotes: 22

Prakash
Prakash

Reputation: 49

<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' );
    });
});

Upvotes: 2

rajesh kakawat
rajesh kakawat

Reputation: 10906

check this fiddle out

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

Upvotes: 6

Brad Christie
Brad Christie

Reputation: 101614

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 spec1, 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.

1 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.

Upvotes: 4

David Hellsing
David Hellsing

Reputation: 108510

Just add:

autocomplete="off"

as attributes to the INPUT elements, f.ex:

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

Upvotes: 34

Related Questions