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.

Papaverine

Just out of curiosity... Why? – Kicksorter

because this field is a search field inside my page, it's not a login page, it's a filter page that for no reason fill in with the user name that logged in and filter the page table – Papaverine

I might just hide any other inputs from a page with login. ||| Less then a minute of googling gave me this helpdesk.lastpass.com/extension-preferences/advanced Apparently the autocomplete off should work, but it needs to be enabled in last pass settings from the users side. – Kicksorter

Possible duplicate of Stop LastPass filling out a form – Precious

If I asked LastPass to autofill a site then that is what I want. Why would you do this? This is a terrible user experience. – Titanic

@AdrianBrand a terrible user experience is when you have a disabled field that is bound to your datasource for user information and you just renamed a user on accident because a field that shouldn't be editable at all just got overwritten. – Anatropous

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

Kinnie

how can i know if it's more than 1 change at a time? can you paste a code example? – Papaverine

@LiadLivnat I've added the link to a fiddle showing the idea. – Kinnie

My issue was lastpass changing a field to the same -1 char, so not a perfect solution – Romansh

given the second workaround however it seems to work well – Romansh

Answer 2

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

data-lpignore="true"

Interplanetary

This is the correct answer, per LastPass documentation: lastpass.com/support.php?cmd=showfaq&id=10512 – Jelks

This removes the icon but does not prevent autocomplete I'm afraid. – Estevez

This doesn't work anymore - I'm banging my head up against it at the moment. See this reddit thread also: reddit.com/r/Lastpass/comments/z1jno4/… – Funest

@GusBus it looks like LastPass has a user setting now to "Respect Autocomplete=off" Source – Interplanetary

@KeeganTeetaert that doesn't solve the problem because I don't want my users to have to configure their lastpass settings just for it not be be annoying. I ended up solving this problem by watching for changes to the DOM around my input fields and selectively deleting them - happy to share source code (DM me - I don't want anyone at LastPass to see it because they'll just figure out a workaround) – Funest

Answer 3

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

Stop LastPass filling out a form

Edom

This is actually VERY good suggestion. Much easier then keypress hacks. – Containment

This is what worked for me here in october 2019 with lastpass shipping another buggy release. And by the way search is not an invalid type for input in html5. It's just a type that at this point Lastpass does nothing with. – Duello

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

Thermotherapy

Answer 5

use this

global:

[data-lastpass-icon-root] {
display: none !important;
}

specific container:

#div_container_to_disable_lastpass [data-lastpass-icon-root] {
display: none !important;
}

Srinagar