Is there a way to prevent the LastPass browser extension from filling out a HTML-based form with an 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".
Adding
data-lpignore="true"
to an input field disabled the grey LastPass [...] box for me.
Sourced from LastPass.com
data-lpignore="true" on each input element that you want to be ignored. Simply adding it to the wrapping <form> in the expectation it will ignore all inner inputs won't work. Thanks Obama. –
Goar v4.104.0 release in November '22 (lastpass.com/upgrade.php) this does not seem to work any longer. –
Cardigan Three conditions have to be met:
autocomplete="off" attributedata-lpignore="true"Settings > Advanced > Allow pages to disable autofillAccount Options > Extension Preferences > Advanced > Respect AutoComplete=off: allow websites to disable AutofillSo this depends on both user and the developer.
Official documentation from LastPass confirms this method is the way to go.
autocomplete="off" on the form elements you wish to disable works fine. You'll still need to do step 3 above, however you don't have to place autocomplete="off" on the form, or include data-lpignore="true". –
Ingratitude 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">
search as classes to both username and password disabled the asterisk button on the username field, but the password field remains as is. –
Muckworm setup_search_form and this did, in fact, hide LastPass for me (for usernames, not for passwords). –
Thermostatics type=search –
Robinrobina 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;
}
background-image on input fields (I like to put "clear buttons" on input fields) - in which case what also worked for me was just setting background-image and background-position with !important to override the lastpass builtin style. –
Steersman 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.
autocomplete="off" at the form level. That just wasted me an hour of development time on an "edit user" form which appeared to display the wrong email address. The lastpass preferences have a "do not overwrite fields that are already filled" option, which helps a lot. –
Hamer 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 :)
type=search is only thing that works for me. –
Robinrobina type=search is the only way to prevent the autofill regardless of the state of the LastPass "Respect autocomplete=off" setting. –
Adamite role="note" or type="search". None worked on latest Chrome and latest lastpass. –
Packing lpignore is working again, fiddle me this https://jsfiddle.net/78z0L1sa/3/ –
Kerns type=search gives you the annoying webkit styling, see https://mcmap.net/q/130006/-how-do-i-remove-all-default-webkit-search-field-styling for how to remove them. –
Atomism Add "search" to input id
<input type="text" name="user" id="user-search"/>
Bit late to the party but I have just achieved this with modifying the form with:
<form autocomplete="off" name="lastpass-disable-search">
I guess this fools lastpass into thinking that it's a search form. This does not work for password fields however! Lastpass ignores the name field in this case.
The only way I've managed to do this is to add the following directly at the top of the form:
<form autocomplete="off">
<div id="lp" ><input type="text" /><input type="password" /></div><script type="text/javascript">setTimeout(function(){document.getElementById('lp').style.display = 'none'},75);</script>
</form>
It causes a nasty flicker but does remove the autofill nonsense - though it does still show the "generate password" widget. LastPass waits until domready and then checks to see if there are any visible password fields, so it's not possible to hide or shrink the mock fields above.
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");
}
For this latest October 2019 buggy release of Lastpass, this simple fix seems to be best.
Add
type="search"
to your input.
The lastpass routine checks the type attribute to determine what to do with its autofill, and it does nothing on this html5 type of "search." This fix is mildly hacky, but it's a one line change that can be easily removed when they fix their buggy script.
Note: After doing this, your input might appear to be styled differently by some browsers if they pick up on the type attribute. If you observe this, you can prevent it from happening by setting the browser-specific CSS properties -webkit-appearance and -moz-appearance to 'none' on your input.
data-lpignore which you can set on true now. This will disable lastpass from autofilling –
Amble Try this one:
[data-lastpass-icon-root], [data-lastpass-root] {
display: none !important;
}
Here's what worked for me to prevent lastpass from filling a razor @Html.EditorFor box in Chrome:
Click the active LastPass icon in your toolbar, then go to Account Options > Extension Preferences.
On this screen check "Don't overwrite fields that are already filled" (at the bottom)
Next, click "advanced" on the left.
On this screen check "Respect AutoComplete=off: allow websites to disable Autofill".
I did not need to do anything special in my ASP cshtml form but I did have a default value in the form for the @Html.EditorFor box.
I hope this helps and works for someone. I could not find any Razor-specific help on this problem on the web so I thought I'd add this since I figured it out with the help of above link and contributions.
While the autocomplete="no-lastpass" attribute has been suggested as a workaround in some cases, it is not guaranteed to work with all versions of LastPass or other autofill tools. Not in my case at least!
To disable LastPass autofill for certain fields, you can try using the readonly attribute and a bit of JavaScript to prevent the field from being editable.
<input type="text" readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly', true);" />
The readonly attribute is initially set on the input field, when the field receives focus, the readonly attribute is removed, allowing the user to enter data. Once the field loses focus, the readonly attribute is set again, disabling further editing.
This approach stopped LastPass from triggering autofill on specific fields.
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>
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:
input[type=password]entirely, ANDSince 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.
For someone who stumbles upon this - autocomplete="new-password" on password field prevents LastPass from filling the password, which in combination with data-lpignore="true" disables it at all
None of these work as of 10/11/2022.
What I did was add the following to a fake password field
<input id="disable_autofill1" name="disable_autofill1"
style="height:0; width:0; background:transparent;
border:none;padding:0.3px;margin:0;display:block;"
type="password">
This seems to be enough to minimize the size this element takes on screen (pretty much 0 for me) while still not triggering last pass's vicious algorithm. Put it before the real password field.
I'm sure a variant of this could be used to fool last pass for other fields where we don't need autofill or to suggest a new password.
Tried the -search rename but for some reason that did not work. What worked for me is the following:
Tried and tested in latest versions of FF and Chrome.
type="hidden" autocomplete="off"
Adding this to my input worked for me. (the input also had visibility: hidden css).
I had the same issue and wanted to prevent Lastpass from filling in data in disabled email input field. I had the issue in my next js application and I used the useEffect hook to attach an event listener to the email input field, specifically listening for the input event. Initially, I tried to prevent the default behaviour using event.preventDefault(), but, unfortunately, this method didn't work. As a workaround, I resolved the issue by reassigning the initial value whenever the event listener was triggered.
useEffect(() => {
const emailField = document.getElementById("emailInput");
emailField.addEventListener("input", (event) => {
event.preventDefault();
emailField.value = user.email;
});
}, []);
The LastPass icon is a late arrival to the DOM. I came up with this to deal with it using jQuery/JavaScript:
$(document).ready(function(){
setTimeout(function(){
$('div[data-lastpass-icon-root]').css({'display': 'none'});
}, 140);
});
Update NOV 2021
I have noticed that all LastPass widgets are wrapped in div of class css-1obar3y.
div.css-1obar3y {
display: none!important;
}
But yeah, it's probably a bad way to go this way.
© 2022 - 2024 — McMap. All rights reserved.
type="hidden"instead of hide it with CSS – Odyssey$(':input').attr('data-lpignore', true);Thats all. This will diable lastpass form filling on all the forms. – Malkamalkah