How to prevent LastPass (chrome extension) from auto-filling input field

Question

I want to prevent LastPass from filling out an input field on my site. I'm using AngularJS and HTML5, and the extension is autofilling the following input field. This field is a search field inside my page; it's not a login page.

<input id="search-publishers-box" type="text" placeholder="Search Publishers" data-ng-model="publishersSearchQuery.name" class="search-field-text" autocomplete="off"/>

What can I do to prevent LastPass from doing its autofill? I've tried to change the placeholder, the model, adding autocomplete="off", and changed the id of the input field.

None have worked at all for me.

Answer 1

Here's my take on this, and usually what I do to solve the autofill problems (yes, they're obscure but they do happen) – I usually watch the fields for changes. Since you're using AngularJS, its pretty easy to do with $watch, or if you're using jQuery, just use .change

And then, whenever there's a change of more than one character at one time, you can assume that its autofill and not someone typing.

Note that this breaks if someone decides to paste into the field.

Another workaround is to allow change on the field only when there's a keypress.

EDIT Here's a fiddle

Answer 2

Try using type="search" instead.. which is an invalid type... which will fallback to type text...

Stop LastPass filling out a form

Answer 3

Put this attribute in your input element you wish to not have LP alter.

data-lpignore="true"

Answer 4

For me, the previous answer from @nawlbergs helped to solve the issue. The data-lpignore="true" isn't helping anymore (probably they've updated their logic as this solution is no more present in their FAQs as well).

LastPass seems to only work with the inputs with type="text" and type="password" to fill the passwords (these are the only input types one can configure in the form fields in LastPass entries). Whenever you're using some other type that's valid (unlike @nawlbergs suggested) but isn't a "text".

That said, the type="search" helps, as well as the rest of the possible valid type values. It's just that the type="search" has the same text-like behaviour and can be used freely anywhere: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search