CODEWITHSUNDEEP
jquerygoogle-chromeautocompletejquery-select2
kevmor
kevmor

Reputation: 172

Chrome ignores autocomplete="off" for select2

Tried several methods of disabling autocomplete and Chrome still ignores it when using jQuery Select2 input.

I tried inserting another input field (and using display: none) before the real input to try to trick Chrome, this didn't seem to work either.

Here is how the input looks now:

<input type="text" autocomplete="off" autocorrect="off" 
autocapitalize="off" spellcheck="false" class="select2-input select2-default" id="s2id_autogen2" placeholder="" style="width: 283px;" aria-activedescendant="select2-result-label-3">

When clicking on the field, at least half the time Chrome will try to autocomplete it with my phone numbers saved in Chrome. Any ideas how to disable it? It also inhibits the Select2 use as it covers it's options up.

Upvotes: 7

Views: 4343

Answers (4)

u1k0g
u1k0g

Reputation: 41

This is kind of a complicated situation relating to Chrome's autofill. There are ways to prevent Chrome's autofill, as discussed in this thread. The one that works for me is setting the autocomplete attribute to a semantic descriptor like "new-phone-number", like:

<input type="text" autocomplete="new-phone-number">

Anyways, I stumbled on this thread as Chrome was autofilling my select2 search-field with stored e-mails from its in-built password manager. My code was laid out as:

<input type="email" name="email" autocomplete="new-email">
<select id="select2">...</select>
<input type="password" name="password" autocomplete="new-password">

When clicking the password input, Chrome will show a list of saved passwords and autofill them - but since it can't identify which are the "email" and "password" inputs due to the semantic descriptors, Chrome will try to fill the saved e-mail to whatever text field immediately precedes the password input.

So, the fix is quite simple:

<select id="select2">...</select>
<input type="email" name="email" autocomplete="new-email">
<input type="password" name="password" autocomplete="new-password">

Hope this helps someone.

Upvotes: 1

Eng Acs
Eng Acs

Reputation: 66

It's Simple try it

<script type="text/javascript" charset="UTF-8">
$(document).ready(function(){
    $( document ).on( 'focus', ':input', function(){
        $( this ).attr( 'autocomplete', 'new-password' );
    }); 
    $( "input.select2-input" ).attr( 'autocomplete', 'new-password' );

});
</script>

Upvotes: 3

Lorenzo Castagno
Lorenzo Castagno

Reputation: 628

Chrome ignores the style="display: none"; or style="visibility: hidden"; attributes

Try something like: 

     <input type="password" style="opacity: 0;position: absolute;">
     <input style="opacity: 0;position: absolute;">

Chrome autocompletes <input type="password"> and <input>.

<input style="display:none">
<input type="password" style="display:none">

Upvotes: 0

Zw1d
Zw1d

Reputation: 51

Simply wrap your input in <form autocomplete="off">

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

Upvotes: 1

Related Questions