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, so I don't want any software to use this field for their purposes:

<input type="text" name="username" id="checkusername" maxlength="9" value="1999" class="longinput" style="display:none">

The solution should not be like "rename the input field".

Answer 1

Adding

data-lpignore="true"

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

Sourced from LastPass.com

Answer 2

Two conditions have to be met:

1. The form (not the element) needs to have autocomplete="off" attribute
2. Lastpass user needs to have this option enabled: Settings > Advanced > Allow pages to disable autofill

So this depends on both user and the developer.

Answer 3

I think lastpass honors the autocomplete="off" attribute for inputs, but I'm not 100% sure.

EDIT As others have pointed out. this only works if the user has last pass configured to honor this.

Answer 4

This ES6 style code was helpful for me as it added data_lpignore to all my input controls:

const elements = document.getElementsByTagName("INPUT");
for (let element of elements) {
    element.setAttribute("data_lpignore", "true");
}

To access a specific INPUT control, one could write something like this:

document.getElementById('userInput').setAttribute("data_lpignore", "true");

Or, you can do it by class name:

const elements = document.getElementsByClassName('no-last-pass');
for (let element of elements) {
    element.setAttribute("data_lpignore", "true");
}

Answer 5

None of the options here 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>

Answer 6

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;
}