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

Codger

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? – Mellissamellitz

A bog standard text input, to build the component, can post some code if you wish? – Codger

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. – Mellissamellitz

Apologies, it's an irish colloquialism, posted an example – Codger

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? – Mellissamellitz

Using the aria-autocomplete attribute, as suggested in answer https://mcmap.net/q/454784/-disable-input-text-suggestions-in-edge , disables the autocomplete for me. – Friction

Answer 1

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

Mellissamellitz

This won't work on any modern browser. Try using decoy fields. https://mcmap.net/q/58023/-disable-browser-39-save-password-39-functionality – Eroticism

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. – Utter

I just found that Microsoft disabled the "autocomplete=off" attribute. What a terrible decision. developer.microsoft.com/en-us/microsoft-edge/platform/issues/… – Utter

@Utter - Is this for all Microsoft browsers or just below edge? – Mellissamellitz

@Mellissamellitz 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. – Utter

@Utter Chrome ignores autocomplete=off as well. #12374942 – Yeti

Answer 2

For anyone experiencing autofill ignoring the autocomplete="off" on Edge 105+, you can use aria-autocomplete="none" alongside, which will prevent autofill from showing up (Tested in macOS 12.5 but should work in other platforms)

Churchyard

It works for me on Edge Version 105.0.1343.42, how do you know this way? – Arredondo

I read a couple of blog posts/chrome issues on auto completion vs autofill and someone mentioned the aria-autocomplete attribute, for which I read the doc and tested. Sure enough, Edge doesn't ignore such attribute when dealing with autofill – Scanty

Adding the aria-autocomplete solved it for me on Windows 10 running Edge Version 105.0.1343.42. This answer should probably be promoted to the accepted solution. – Friction

I was going crazy because all of my old workarounds stopped working and none of the other suggestions I could find worked. aria-autocomplete worked for me in Windows 10, Edge Version 106.0.1370.37 – Chickenhearted

autocomplete="off" + aria-autocomplete="none" no longer works for us on Edge version 112.0.1722.34 – Puma

Working perfectly on Edge Version 114.0.1823.67 (Official build) (64-bit), Windows 11 – Darwen

Working on Edge 117, Mac – Callie

Answer 3

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.

2021 update:

Another solution which works very well for me is to add the readonly attribute to the field and then remove the tag using JQuery after a short delay of a few ms. The readonly attributes causes Edge (and others) to ignore the field.

Delbert

This is the best answer. – Aronson

On Edge Chromium, use list="autocompleteOff" because autocomplete="off" is inoperent. – Nescience

Edge Chromium I am not finding this to work, sadly. – Geesey

I am using Microsoft Edge Version 102.0.1245.33 (Official build) (64-bit), this solution is not working. DATE: 10th-JUNE-2022 – Narrow

Answer 4

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.

Blankly

In Edge it worked only when put on form, not individual elements, thanks – Intergrade

Answer 5

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.

Mccarron

Answer 6

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

Dewey

Answer 7

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.

Altimeter

What if it takes 2001 milliseconds to finish rendering every once in a while? – Levitus

Answer 8

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

Hathor

it only works until you encounter the same somerandomstring more than once on the same computer. Perhaps if you use the current timestamp as the autocomplete.... – Geesey

Answer 9

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

Ottava

Answer 10

autocomplete="off" doesn't work since yesterday (edge 105.0.1343.25). Looks like a bug to me. Hopefully, they will fix it soon.

Alcaic

Answer 11

In the form field, try autocomplete="-"

Jeff

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Flaw

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Denaedenarius

Answer 12

try using a <textarea>, i think the only thing you can't do is make it type="password" to hide the text, otherwise it seems to stop autocomplete completely.

Beauty

Answer 13

in edge worked for me

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

`according to this https://mcmap.net/q/328759/-autocomplete-39-off-39-is-not-working-when-the-input-type-is-password-and-make-the-input-field-above-it-to-enable-autocomplete

Archipenko