html - password - input autocomplete javascript
¿Existe una forma válida de W3C para deshabilitar el autocompletado en un formulario HTML? (17)
Cuando se utiliza el xhtml1-transitional.dtd , se recopila un número de tarjeta de crédito con el siguiente código HTML
<input type="text" id="cardNumber" name="cardNumber" autocomplete=''off''/>
marcará una advertencia en el validador W3C:
No hay atributo "autocompletar".
¿Existe una forma de W3C / normas para deshabilitar la finalización automática del navegador en campos confidenciales en un formulario?
Autocompletar válido desactivado
<script type="text/javascript">
/* <![CDATA[ */
document.write(''<input type="text" id="cardNumber" name="cardNumber" autocom''+''plete="off"/>'');
/* ]]> */
</script>
¿Qué hay de configurarlo con JavaScript?
var e = document.getElementById(''cardNumber'');
e.autocomplete = ''off''; // Maybe should be false
No es perfecto, pero tu HTML será válido.
Creo que hay una forma más sencilla. Cree una entrada oculta con un nombre aleatorio (a través de javascript) y establezca el nombre de usuario para eso. Repita con la contraseña. De esta manera, la secuencia de comandos de back-end sabe exactamente cuál es el nombre de campo apropiado, mientras se mantiene autocompletado en la oscuridad.
Probablemente me equivoque, pero es solo una idea.
Esta solución funciona conmigo:
$(''form,input,select,textarea'').attr("autocomplete", "nope");
Si desea usar autocompletar en esta región: agregue autocomplete="false" en el elemento ex:
<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
Me sorprendería mucho si W3C hubiera propuesto una forma que funcionara con (X) HTML4. La función de autocompletar está completamente basada en el navegador y se introdujo durante los últimos años (mucho después de que se escribiera el estándar HTML4).
Sin embargo, no se sorprendería si HTML5 tuviera uno.
Edición: Como pensé, HTML5 tiene esa característica. Para definir su página como HTML5, use el siguiente doctype (es decir, ponga esto como el primer texto en su código fuente). Tenga en cuenta que no todos los navegadores admiten este estándar, ya que todavía está en formato de borrador.
<!DOCTYPE html>
No es lo ideal, pero podría cambiar la identificación y el nombre del cuadro de texto cada vez que lo represente; también tendría que hacer un seguimiento del lado del servidor para poder sacar los datos.
No estoy seguro de si esto funcionará o no, fue solo un pensamiento.
No, pero el autocompletado del navegador a menudo se activa cuando el campo tiene el mismo atributo de name que los campos que se completaron anteriormente. Si pudiera armar una forma inteligente de tener un nombre de campo aleatorio , autocompletar no podría extraer ningún valor ingresado previamente para el campo.
Si email_<?= randomNumber() ?> a un campo de entrada un nombre como " email_<?= randomNumber() ?> ", Y luego email_<?= randomNumber() ?> que el script que recibe este bucle de datos a través de las variables POST o GET busque algo que coincida con el patrón " email_[some number] ", podría llevar a cabo esto, y esto tendría (prácticamente) un éxito garantizado, independientemente del navegador .
No, un buen artículo está aquí en Mozila Wiki .
Continuaría usando el attribute inválido. Creo que aquí es donde el pragmatismo debería ganar la validación.
Otra forma, que también ayudará con la seguridad, es llamar al cuadro de entrada algo diferente cada vez que lo muestres: como un captha. De esa manera, la sesión puede leer la entrada de una sola vez y Auto-Complete no tiene nada para continuar.
Solo un punto con respecto a la pregunta de rmeador sobre si debería interferir con la experiencia del navegador: desarrollamos sistemas de gestión de contactos y CRM, y cuando escribe los datos de otras personas en un formulario, no quiere que sugiera constantemente sus propios datos.
Esto funciona para nuestras necesidades, pero luego tenemos el lujo de decirles a los usuarios que obtengan un navegador decente :)
autocomplete=''off''
Si usas jQuery, puedes hacer algo como eso:
$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});
y usa la clase autocompleteOff donde quieras:
<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />
Si desea que TODAS sus entradas sean autocomplete=off , simplemente puede usar eso:
$(document).ready(function(){$("input").attr("autocomplete","off");});
Sugiero capturar los 4 tipos de entrada:
$(''form,input,select,textarea'').attr("autocomplete", "off");
Referencia:
Tenga en cuenta que hay cierta confusión sobre la ubicación del atributo autocompletar. Se puede aplicar a toda la etiqueta FORM o a etiquetas INPUT individuales, y esto no estaba realmente estandarizado antes de HTML5 (que permite explícitamente both locations ). Los documentos más antiguos, especialmente este artículo de Mozilla, solo mencionan la etiqueta FORM. Al mismo tiempo, algunos escáneres de seguridad solo buscarán autocompletar en la etiqueta de ENTRADA y se quejarán si falta (incluso si está en el FORMULARIO principal). Aquí se publica un análisis más detallado de este lío: Confusión sobre los atributos AUTOCOMPLETE = OFF en formularios HTML .
Usar un atributo aleatorio de ''nombre'' funciona para mí.
Reajusté el atributo de nombre al enviar el formulario para que aún pueda acceder a él por nombre cuando se envía el formulario. (usando el atributo id para almacenar el nombre)
Here hay un buen artículo del MDC que explica los problemas (y soluciones) para completar el autocompletado. Microsoft ha publicado algo similar here , también.
Para ser honesto, si esto es algo importante para sus usuarios, los estándares de "ruptura" de esta manera parecen apropiados. Por ejemplo, Amazon usa el atributo ''autocompletar'' un poco, y parece funcionar bien.
Si desea eliminar la advertencia por completo, puede usar JavaScript para aplicar el atributo a los navegadores que lo admiten (IE y Firefox son los navegadores importantes) utilizando someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" ); someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );
Finalmente, si su sitio utiliza HTTPS, IE desactiva automáticamente el autocompletado (al igual que otros navegadores, que yo sepa).
Actualizar
Como esta respuesta aún recibe muchos votos positivos, solo quería señalar que en HTML5, puede usar el atributo ''autocompletar'' en su elemento de formulario. Consulte la documentation en W3C para ello.
autocomplete="off" esto debería solucionar el problema para todos los navegadores modernos.
<form name="form1" id="form1" method="post" autocomplete="off"
action="http://www.example.com/form.cgi">
[...]
</form>
En las versiones actuales de los navegadores Gecko, el atributo autocompletar funciona perfectamente. Para versiones anteriores, volviendo a Netscape 6.2, funcionó con la excepción de los formularios con "Dirección" y "Nombre"
Actualizar
En algunos casos, el navegador seguirá sugiriendo valores de autocompletado incluso si el atributo autocompletar está desactivado. Este comportamiento inesperado puede ser bastante desconcertante para los desarrolladores. El truco para forzar realmente el no autocompletado es asignar una cadena aleatoria al atributo , por ejemplo:
autocomplete="nope"
Dado que este valor aleatorio no es valid one , el navegador se rendirá.
HTML 4 : No
HTML 5 : si
El atributo autocompletar es un atributo enumerado. El atributo tiene dos estados. La palabra clave activada se asigna al estado activado y la palabra clave desactivada se asigna al estado desactivado. El atributo también puede ser omitido. El valor predeterminado que falta es el estado activado. El estado apagado indica que, de forma predeterminada, los controles de formulario en el formulario tendrán su nombre de campo de relleno automático desactivado ; el estado activado indica que, de forma predeterminada, los controles de formulario en el formulario tendrán su nombre de campo de
autofillestablecido en "activado".
Referencia: W3
if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName(“input”);
for (i=0; inputElements[i]; i++) {
if (inputElements[i].className && (inputElements[i].className.indexOf(“disableAutoComplete”) != -1)) {
inputElements[i].setAttribute(“autocomplete”,”off”);
}
}
}