¿Hay alguna manera de evitar que la extensión del navegador LastPass complete un formulario basado en HTML con un campo de entrada con el nombre "nombre de usuario"?

Este es un campo oculto, por lo que no quiero que ningún software use este campo para sus propósitos:

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

La solución no debería ser como "cambiar el nombre del campo de entrada".

Agregando

data-lpignore="true"

a un campo de entrada deshabilitó el cuadro gris [...] LastPass para mí.

Procedente de LastPass.com

Deben cumplirse dos condiciones:

1. La forma (no el elemento) necesita tener un autocomplete="off"atributo
2. El usuario de Lastpass necesita tener esta opción habilitada: Settings > Advanced > Allow pages to disable autofill

Entonces esto depende tanto del usuario como del desarrollador.

Lo que funcionó para mí es tener la palabra "-search-" en la identificación del formulario, algo así como <form id="affiliate-search-form">, y lastpass no agrega sus elementos en las entradas del formulario. Funciona con algo más simple como <form id="search">pero no funciona con<form id="se1rch">

Sé que llego tarde a la fiesta aquí, pero encontré esto cuando estaba tratando de evitar que lastpass arruinara mis formularios. @takeshin es correcto porque el autocompletado no es suficiente. Terminé haciendo el truco a continuación solo para ocultar el símbolo. No es bonito, pero me deshice del ícono.

Si algún desarrollador de lastpass está leyendo esto, por favor denos un atributo para usar, para que no tengamos que recurrir a cosas como esta.

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

Creo que lastpass respeta el autocomplete="off"atributo de las entradas, pero no estoy 100% seguro.

EDITAR Como otros han señalado. esto solo funciona si el usuario tiene la última pasada configurada para honrar esto.

Para mí trabajé bien, lo type=searchque es un poco igual texto lo uso role=note.

Puede verificar el LastPass-JavaScript pero es enorme, puede encontrar alguna solución allí, por lo que vi, solo verifican 4 tipos de entrada, por input type=searchlo que sería una solución alternativa:

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

También esas son las rolepalabras clave que parecen ignorar:

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":`

Verifiqué LastPass ' onloadwff.js, me preparé para 26.960 líneas de código :)

Agregue "buscar" a la identificación de entrada

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

Llegué un poco tarde a la fiesta, pero acabo de lograr esto modificando el formulario con:

<form autocomplete="off" name="lastpass-disable-search">

Supongo que esto hace que los tontos piensen que es un formulario de búsqueda. ¡Sin embargo, esto no funciona para los campos de contraseña! Lastpass ignora el campo de nombre en este caso.

La única forma en que he logrado hacer esto es agregar lo siguiente directamente en la parte superior del formulario:

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

Causa un parpadeo desagradable pero elimina las tonterías de autocompletar, aunque todavía muestra el widget "generar contraseña". LastPass espera hasta domready y luego verifica si hay campos de contraseña visibles, por lo que no es posible ocultar o reducir los campos simulados de arriba.

Para esta última versión con errores de Lastpass de octubre de 2019, esta solución simple parece ser la mejor.

Añadir

type="search"

a su entrada

La rutina lastpass verifica el typeatributo para determinar qué hacer con su autocompletado, y no hace nada en este html5 typede "búsqueda". Claro que esto es ligeramente hacky, pero es un cambio de una línea que se puede eliminar fácilmente cuando arreglan su script con errores.

Nota: después de hacer esto, su entrada puede parecer que algunos navegadores tienen un estilo diferente si se dan cuenta del typeatributo. Si se observa esto, se puede evitar que suceda estableciendo las propiedades CSS específicas del navegador -webkit-appearancey -moz-appearanceque 'none'en su entrada.

Este código de estilo ES6 fue útil para mí ya que agregó data-lpignore a todos mis controles de entrada:

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

Para acceder a un control INPUT específico, se podría escribir algo como esto:

document.getElementById('userInput').setAttribute("data-lpignore", "true");

O bien, puede hacerlo por nombre de clase:

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

Ninguna de las opciones aquí (autocompletar, data-lpignore, etc.) impidió que LastPass rellene automáticamente mis campos de formulario por desgracia. Adopté un enfoque más complejo del problema y establecí asincrónicamente los nameatributos de entrada a través de JavaScript. La siguiente función dependiente de jQuery (invocada desde el controlador de eventos onsubmit del formulario) hizo el truco:

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

En el formulario, simplemente usé tmp-nameatributos en lugar de los nameatributos equivalentes . Ejemplo:

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

Actualizar 2019-03-20

Todavía me encontré con dificultades con lo anterior debido a AngularJS dependiendo de los campos de formulario que tienen nameatributos para que ngMessages presente correctamente los mensajes de error de validación de campo.

Finalmente, la única solución que pude encontrar para evitar que LastPass llene los campos de contraseña en mi formulario de Cambio de contraseña fue:

1. Evite usar por input[type=password]completo, Y
2. no tener 'contraseña' en el nombre del campo

Como necesito poder enviar el formulario normalmente en mi caso, aún empleé mi solución original para actualizar los nombres de campo 'justo a tiempo'. Para evitar el uso de campos de ingreso de contraseña, encontré que esta solución funcionó muy bien.

Intenté el cambio de nombre de búsqueda, pero por alguna razón eso no funcionó. Lo que funcionó para mí es lo siguiente:

1. marcar formulario para autocompletar - autocompletar = "off"
2. cambiar el tipo de entrada del campo de formulario a texto
3. agregue una nueva clase a su CSS para enmascarar la entrada, simula un campo de contraseña
4. bit css: input.masker {-webkit-text-security: disco; }

Probado y probado en las últimas versiones de FF y Chrome.

Esto es lo que funcionó para mí para evitar que lastpass llene una caja de afeitar @ Html.EditorFor en Chrome:

Haga clic en el icono activo de LastPass en su barra de herramientas, luego vaya a Opciones de cuenta> Preferencias de extensión.

En esta pantalla, marque "No sobrescribir campos que ya están rellenos" (en la parte inferior)

A continuación, haga clic en "avanzado" a la izquierda.

En esta pantalla, marque "Respetar Autocompletar = desactivado: permitir que los sitios web desactiven el Autocompletar".

No necesitaba hacer nada especial en mi formulario ASP cshtml pero tenía un valor predeterminado en el formulario para el cuadro @ Html.EditorFor.

Espero que esto ayude y funcione para alguien. No pude encontrar ninguna ayuda específica de Razor sobre este problema en la web, así que pensé en agregar esto ya que lo descubrí con la ayuda del enlace y las contribuciones anteriores.