Disable input text suggestions in Edge?

Question

I have built a textbox dropdown AngularJS component which works great in Chrome, Firefox, Safari and Internet Explorer.

A feature of this component is that you type in a string, and then can use the up/down arrow keys to scroll through suggestions.

In Microsoft Edge, as soon as you hit the down arrow, the following text is added to the input box:

briefly explain your changes (corrected spelling, fixed grammar, improved formatting)

Is there anything I can do client side to stop this from happening?

<form>
    <input type="text" />    
</form>

To demonstrate this, run the above snipper, type something into the textbox and hit the down arrow twice on Edge. I want this to not happen, as it is breaking my autocomplete!

Thanks

Are you using an input? If not, what type of element are you using? Are you trying to fix this issue whatever way possible or with an Angular.js solution? — rockmandew, Sep 25 '15 at 15:47
A bog standard text input, to build the component, can post some code if you wish? — JMK, Sep 25 '15 at 15:48
Might as well, not sure what a "bog" standard text input is to be completely honest. I'm assuming that was a typo and you're just talking about a regular text input. Please post the code and I will follow up. I'm going to assume, it's a simple "autocomplete" setting solution. — rockmandew, Sep 25 '15 at 15:52
its not a problem at all, I just wanted to clarify to make sure I was giving you accurate information. Did that solution work? If so, could you please accept the answer so the topic is closed? — rockmandew, Sep 25 '15 at 16:04

score 29 · Accepted Answer · answered Sep 25 '15 at 15:53

29

If I understand correctly, you are having an issue with the autocomplete feature. Simple add "autocomplete='off'" to your input and that should disable the feature.

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

answered Sep 25 '15 at 15:53

rockmandew

772
10
18

This won't work on any modern browser. Try using decoy fields. http://stackoverflow.com/a/2555771/317908 – Michael Kuhinica Aug 17 '16 at 03:35
In Edge, if you backspace and delete the contents of the input, Edge will then display the autocomplete box. So while this attribute helps, it does not solve the problem. – Brain2000 Nov 28 '17 at 20:44
6

I just found that Microsoft disabled the "autocomplete=off" attribute. What a terrible decision. https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9847360/ – Brain2000 Nov 28 '17 at 20:56
@Brain2000 - Is this for all Microsoft browsers or just below edge? – rockmandew Nov 29 '17 at 15:40
1

@rockmandew Just Edge. IE 11 still works. I found the suppression works on Edge to some extent, as the autocomplete can still appear if you tab into an input and press backspace to remove the contents. – Brain2000 Dec 16 '17 at 16:42
@Brain2000 Chrome ignores autocomplete=off as well. https://stackoverflow.com/questions/12374442/chrome-browser-ignoring-autocomplete-off – Mike Mar 20 '18 at 19:50

score 24 · Answer 2 · answered Oct 02 '18 at 12:11

24

Unfortunately, none of the above suggestions worked for me in latest Edge. However, this solution does:

<input type="text" autocomplete="off" list="autocompleteOff" 
    id="fieldId" name="fieldname" placeholder="Placeholder here" />

This forces Edge to find a data lookup list called autocompleteOff which doesn't exist. Works a treat for me.

Added advantage is that it's pure HTML, no CSS or JS required.

answered Oct 02 '18 at 12:11

SimonGoldstone

4,842
3
21
36

3

This is the best answer. – user749798 May 01 '19 at 02:11
On **Edge Chromium**, use `list="autocompleteOff" ` because `autocomplete="off"` is inoperent. – Vifier Lockla Dec 08 '20 at 07:10
2

Edge Chromium I am not finding this to work, sadly. – Garr Godfrey Dec 23 '20 at 05:21
Also on Edge v89 this seems not to work. – Stephan Mar 18 '21 at 11:23

score 7 · Answer 3 · edited Jan 25 '17 at 15:49

7

From Mozilla: You can set the autocomplete on the actual form tag <form autocomplete='off' ... >...</form> which will work for the entire form, or on individual <input type='text' /> tags.

In my experience on IE 11 and Edge putting it on the form works but individual tags does not work. I tried testing on Chrome but the fields were already not autocompleting.

Please read the full Article for more detailed information.

NOTE

Most browsers disregard this for login fields.

edited Jan 25 '17 at 15:49

Maximilian Ast

2,954
12
33
40

answered Jan 25 '17 at 14:55

Charles Driver Jr.

197
4
14

1

In Edge it worked only when put on form, not individual elements, thanks – Michael Goltsman Oct 31 '17 at 08:33

score 4 · Answer 4 · answered Sep 16 '19 at 14:01

if you want to remove autocomplete at the input in chrome when you use autocomplete="off" also you must remove id, if you don't remove id on your input, autocomplete will not work!

simple example:

<input type="text" autocomplete="off" list="autocompleteOff" 
     name="fieldname" placeholder="Placeholder here" />

you can handle your input with name ;) , that work for me fine.

score 2 · Answer 5 · answered Sep 05 '16 at 15:35

if you need it app/site-wide you can use jquery:

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

Or if you're like me and using Angular+ui-router you might try the following:

In your index.html add the following script:

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

Then to cover state changes, add the following to your 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.

What if it takes 2001 milliseconds to finish rendering every once in a while? — jinglesthula, Jan 31 '19 at 17:32

score 1 · Answer 6 · answered Oct 02 '20 at 22:32

<input type="text" autocomplete="new-password" />

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 autofilling of password fields, you can use autocomplete="new-password"

MDN reference

It works also for non-password fields.

score 0 · Answer 7 · answered Jun 26 '20 at 10:55

0

Just autocomplete="off" list="autocompleteOff" in your input and work done !

answered Jun 26 '20 at 10:55

prabhat.mishra2812

309
2
6

score 0 · Answer 8 · answered Feb 03 '21 at 17:46

0

in edge worked for me

`autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" /

`according to this https://stackoverflow.com/a/30344707/14913109

answered Feb 03 '21 at 17:46

Hamza Qureshi

330
11

score 0 · Answer 9 · answered Feb 19 '21 at 14:08

0

This worked for Edge & Chrome (not a login form tho, not sure if that makes a difference)

autocomplete="somerandomstring"

https://gist.github.com/niksumeiko/360164708c3b326bd1c8#gistcomment-2367048

answered Feb 19 '21 at 14:08

softfrog

40
1
8

Disable input text suggestions in Edge?

9 Answers9

Linked