¿Cómo puedo evitar los campos de prepopulación del navegador en mi formulario de registro?

Question

autocomplete="off" No es lo que estoy buscando. Básicamente, en mi formulario de registro hay campos "teléfono" y "contraseña" colocados uno encima del otro. (ver captura de pantalla)

El campo "Teléfono" tiene, molesto, prepoblado con un nombre de usuario, ya que supongo que lo que está haciendo el navegador está haciendo: el navegador encuentra un campo de contraseña de tipo y asume el campo de entrada de texto justo antes de que sea un campo de nombre de usuario. El efecto es este:

Por qué no estoy interesado en el atributo autocompletado no estándar para el campo del teléfono, es que quiero que el usuario pueda llenar este formulario lo más fácilmente posible y si han ingresado previamente su número de teléfono en otros sitios (en campos llamados "Teléfono") podrían beneficiarse de esta aparición cuando comienzan a escribir en el campo. Por eso no quiero apagar el autocompleto por completo.

Estaba pensando más en la dirección de reorganizar los campos de alguna manera para evitar este comportamiento. O alguna forma de decirle al navegador que el campo por encima del campo de contraseña no tiene nada que ver con él, o que el campo de contraseña no se usa para fines de autenticación. De alguna manera marquelo como eso. ¿O inyectar algún elemento invisible entre estos dos campos?

¿Algunas ideas?

Marcado utilizado:

<input id="phone" name="phone" type="text" value="" maxlength="30">
<input id="newPassword" name="newPassword" type="password" value="" maxlength="20">

Estoy obteniendo este comportamiento en Chrome, FF (no estoy seguro de IE, tengo una versión arcaica de eso en mi máquina, ni siquiera quiero comenzar a preocuparse por IE).

Answer 1

La mayoría de los administradores de contraseñas buscarán el primer campo de contraseña y el campo de texto más cercano antes.

Entonces, todo lo que tiene que hacer es agregar campos invisibles de texto y contraseña (display:none) arriba "nueva contraseña".

Firefox intenta interpretar 3 campos de contraseña Como una acción de "Cambiar contraseña", por lo que si no desea que esté seguro agregando otro campo de contraseña invisible.

Answer 2

Tuve un problema similar con el campo Contraseña establecida. Probar

<input type="password" autocomplete="new-password">

De MDN aporte documentación:

autocompletar

Este atributo indica si el navegador puede completar automáticamente el valor del control.

Los valores posibles son:

.... New-Password: una nueva contraseña (por ejemplo, al crear una cuenta o cambiar una contraseña)

Para el problema del número de teléfono, configuré esto y dejó de completar el nombre de usuario allí.

<input type="tel">

Answer 3

Un número de inicio no puede ser de 30 caracteres, esta es probablemente la razón por la cual el navegador supone que podría ser un nombre de usuario o correo electrónico de inicio de sesión debido al tamaño. Cámbielo a algo real y vea lo que sucede.

Además, considere tener 3 campo para el número de teléfono, código de área, prefijo, sufijo. Una vez que se llenan un cierto número de dígitos, puede enfocarse automáticamente usando JavaScript en el siguiente campo del segmento de teléfono para que sea más fácil para el usuario.

¿También ha intentado cambiar de posición de campos? ¿Qué ha pasado?

Además, solo para asegurarse, puede apagar automático completo en un artículo en particular durante el registro sin preocuparse de que esté apagado durante el inicio de sesión (porque no lo hará) a menos que lo apague también para los campos de inicio de sesión y, por supuesto, No tienes necesidad de hacerlo.

Además, elimine sus cosas de forma automática guardada no utilizada, podría ser un problema local con su versión, es posible que haya ingresado un mal valor algún día en uno de los navegadores, y luego instaló el otro navegador (Chrome o FF), y Luego, el navegador recién instalado copió las reglas exactamente como eran de su navegador original ... así que terminas pensando que es un problema global con tu forma, simplemente por una mala entrada y porque tu segundo navegador instalado copió y replicó el Mala regla de entrada de su primer navegador, haciendo que parezca un problema real y universal para usted, ¿me entiendes? Por lo tanto, pruebe los modos InPrivate de los navegadores, o pruebe los navegadores desde una instalación diferente o una computadora diferente, o desde una instancia de VirtualPC que pueda tener.

De lo contrario, exporte toda su configuración desde sus navegadores y desinstale ambos navegadores, luego reinstale desde cero FF y Chrome, luego pruebe su página web, luego no dude en importar su configuración exportada.

Además, pruebe en IE, incluso si es por la idea que puede darle, ¿sabes a qué me refiero?

Espero que esto ayude, hágame saber cómo te va y si tienes alguna otra pregunta.

ACTUALIZAR:

Dado el método que ha elegido, lo que debería poder hacer es, al renderizar el campo del teléfono, agregar un atributo value = "" en la etiqueta de entrada, en lugar de usar JavaScript. Esto debería evitar que el pre-relleno ocurra sin necesidad de usar JavaScript. Ahora, si quieres ir un paso más allá, puedes hacer esto:

Durante el evento de entrada de cuando se carga la página, verifique el campo del teléfono usando JavaScript, y si el valor es igual a un espacio (""), sobrescribirlo con una cadena vacía usando JavaScript una vez que se activa la carga. O, si el navegador todavía está en cuanto a la preclución (dudo que lo haga, pero si es así) puede retrasar este cheque por unos pocos cientos de milisegundos y ejecutar el JavaScript unos pocos cientos La entrada camina los eventos de Onfocus, por lo que tan pronto como cualquiera de los campos se enfoca, usted hace el "valor de teléfono. Value es igual a un personaje espacial (" ") y si lo hace, sobrescribirlo con una cadena vacía, soy aún más seguro que el navegador no va a saltar y secuestrar ese campo en esta situación. Aunque, como se mencionó, incluso si haces esto, dudo que el navegador secuestre tu campo, ya que las páginas/JavaScript Onload ocurre después de los navegadores internos internos Se produce un evento Onload (documentComplete), y en el peor de los casos, puede hacer el método de retraso de pocos cientos de milisegundos o Onfocus, pero dudo que los necesite.

Déjame saber como va.

Answer 4

Intenté deshabilitar los campos de entrada type = text & type = contraseña después de la carga del DOM y luego habilitó todos los campos deshabilitados después de ciertos milisegundos, digamos 100. Parece estar funcionando para mí. Probar :

$(document).ready(function()
{
$("input[type=text],input[type=password]").prop('disabled','disabled');

$("body").delay(10,function(){
    $("input[type=text],input[type=password]").prop('disabled','');
    });
});