html - validacion - ¿Cómo puedo evitar llenar previamente campos en mi formulario de registro?

validar formulario html5

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" recibe, fastidiosamente, rellenado previamente con un nombre de usuario, ya que supongo que está haciendo el navegador: el navegador encuentra un campo de tipo contraseña 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 de autocompletar no estándar para el campo del teléfono, es que quiero que el usuario pueda completar este formulario lo más fácilmente posible y si previamente han ingresado su número de teléfono en otros sitios (en campos llamados "teléfono") podrían beneficiarse al aparecer mientras comienzan a escribir en el campo. Es por eso que no quiero desactivar el autocompletado por completo.

Estaba pensando más en la dirección de reorganizar los campos de alguna manera para evitar este comportamiento. O una forma de decirle al navegador que el campo sobre el campo de la contraseña no tiene nada que ver con eso, o que el campo de la contraseña no se usa con fines de autenticación. De alguna manera marqúelo 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 acerca de IE, tengo una versión arcaica de eso en mi máquina, ni siquiera quiero preocuparme por IE aún).

Answer 1

Intenté deshabilitar los campos de entrada type = text & type = password después de cargar el DOM, luego habilité todos los campos deshabilitados después de ciertos milisegundos, digamos 100. Parece que me funciona. Tratar :

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

Answer 2

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 de él.

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

Firefox intenta interpretar 3 campos de contraseña como una acción de "cambio de contraseña", por lo que, si no lo desea, debería estar seguro al agregar otro campo de contraseña invisible.

Answer 3

Tuve un problema similar con el campo establecer contraseña. Tratar

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

De input documentación de input MDN:

autocompletar

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

Los valores posibles son:

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

Para el problema con el número de teléfono, configuré esto y se detuvo el autocompletado allí.

<input type="tel">

Answer 4

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

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

¿Has intentado cambiar las posiciones de los campos? ¿Qué ha pasado?

Además, solo para asegurarse, puede desactivar el autocompletado en un artículo en particular durante el registro sin preocuparse de que estará apagado durante el inicio de sesión (porque no lo hará) a menos que también lo haya desactivado para los campos de inicio de sesión, y por supuesto no tienes necesidad de hacerlo

Además, elimine el formulario guardado no utilizado que completa automáticamente, podría ser un problema local con su versión, puede haber ingresado un valor incorrecto un 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 ... Entonces, termina pensando que es un problema global con su formulario, simplemente debido a una entrada incorrecta y porque su segundo navegador instalado copió y reprodujo el mala regla de entrada de su primer navegador, haciéndolo parecer 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 virtualpc que pueda tener.

De lo contrario, exporte todas las configuraciones desde su navegador y desinstale ambos navegadores, luego reinstale desde cero FF y Chrome, luego pruebe su página web y luego vuelva a importar sus configuraciones exportadas.

Además, prueba en IE, incluso si es por la información que puede darte, ¿sabes a qué me refiero?

Espero que esto ayude, déjame 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 representar el campo del teléfono, agregar un atributo value = "" en la etiqueta de entrada, en lugar de usar JavaScript. Esto debería evitar que ocurra el prellenado sin la necesidad de usar javascript. Ahora, si quieres dar un paso más, puedes hacer esto:

Durante el evento OnLoad de cuándo se carga la página, verifique el campo del teléfono usando JavaScript, y si el valor es igual a un espacio (""), sobrescríbalo con una cadena vacía usando JavaScript una vez que se active onLoad. O bien, si el navegador todavía se está llenando (lo dudo, pero si lo está) puede retrasar esta comprobación unos cientos de milisegundos y ejecutar el javascript unos cientos de milisegundos después de que la página se haya cargado, o vincularlo a todos o algunos de los campos de entrada en los eventos Focus, por lo que tan pronto como cualquiera de los campos obtenga el foco, usted hace el "does phone.value = un carácter de espacio (" ") y si lo hace, lo sobrescribe 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 en carga, dudo que el navegador se apropie de tu campo, ya que las páginas / javascript onload ocurren DESPUÉS de los navegadores internos se produce el evento onLoad (DocumentComplete), y en el peor de los casos, puede hacer el desfase de unos cientos de milisegundos o el método de enfoque, pero dudo que los necesite.

Déjame saber como va.