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

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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.