Stop LastPass filling out a form

Question

Is there a way to prevent the LastPass browser extension from filling out a HTML-based form with a input field with the name \"username\"?

This is an hidden field,

Answer 1

Adding

data-lpignore="true"

to an input field disabled the grey LastPass [...] box for me.

Sourced from LastPass.com

Answer 2

Add "search" to input id

<input type="text" name="user" id="user-search"/>

Answer 3

I know I'm late to the party here, but I found this when I was trying to stop lastpass from ruining my forms. @takeshin is correct in that autocomplete is not enough. I ended up doing the hack below just to hide the symbol. Not pretty, but I got rid of the icon.

If any lastpass developers are reading this, please give us an attribute to use, so we don't have to resort to stuff like this.

form[autocomplete="off"] input[type="text"] {
    background-position: 150% 50% !important;
}

Answer 4

For me worked either type=search which is kinda equal to text or using role=note.

You can check the LastPass-JavaScript but it's huge, may be you can find some workaround there, from what I saw they only check 4 input types, so input type=search would be one workaround:

!c.form && ("text" == c.type || "password" == c.type || "url" == c.type || "email" == c.type) && lpIsVisible(c))

Also those are the role-keywords they seem to ignore:

var c = b.getAttribute("role");
switch (c) {
case "navigation":
case "banner":
case "contentinfo":
case "note":
case "search":
case "seealso":
case "columnheader":
case "presentation":
case "toolbar":
case "directory":`

I checked LastPass' onloadwff.js, prepare for 26.960 lines of code :)

Answer 5

What worked for me is having word "-search-" in the id of the form, something like <form id="affiliate-search-form"> - and lastpass doesn't add its elements onto the form inputs. It works with something simpler like <form id="search"> but doesn't work with <form id="se1rch">

Answer 6

None of the options here (autocomplete, data-lpignore etc.) prevented LastPass from auto-filling my form fields unfortunately. I took a more sledge-hammer approach to the problem and asynchronously set the input name attributes via JavaScript instead. The following jQuery-dependent function (invoked from the form's onsubmit event handler) did the trick:

function setInputNames() {
    $('#myForm input').each(function(idx, el) {
        el = $(el);
        if (el.attr('tmp-name')) {
            el.attr('name', el.attr('tmp-name'));
        }
    });
}

$('#myForm').submit(setInputNames);

In the form, I simply used tmp-name attributes in place of the equivalent name attributes. Example:

<form id="myForm" method="post" action="/someUrl">
    <input name="username" type="text">
    <input tmp-name="password" type="password">
</form>

Update 2019-03-20

I still ran into difficulties with the above on account of AngularJS depending upon form fields having name attributes in order for ngMessages to correctly present field validation error messages.

Ultimately, the only solution I could find to prevent LastPass filling password fields on my Password Change form was to:

1. Avoid using input[type=password]entirely, AND
2. to not have 'password' in the field name

Since I need to be able to submit the form normally in my case, I still employed my original solution to update the field names 'just in time'. To avoid using password input fields, I found this solution worked very nicely.