¿Hay una manera válida W3C desactivar autocompletar en un formulario HTML?

https://stackoverflow.com/questions/582244

06-09-2019
|

Pregunta

Cuando se utiliza el tipo de documento xhtml1-transitional.dtd, la recogida de un número de tarjeta de crédito con la siguiente etiqueta HTML

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

bandera voluntad una advertencia en el validador del W3C:

no hay ningún atributo "autocompletar".

¿Hay una manera de W3C / normas para desactivar el navegador auto-completar en los campos sensibles en un formulario?

Solución

Aquí es un buen artículo del MDC que explica los problemas (y soluciones) para formar terminación automática. Microsoft ha publicado algo aquí , también.

Para ser sinceros, si esto es algo importante para sus usuarios, 'romper' las normas de esta manera parece apropiado. Por ejemplo, Amazon utiliza el 'autocompletar' atributo un poco, y parece que funciona bien.

Si desea eliminar por completo el aviso, puede utilizar JavaScript para aplicar el atributo a los navegadores que lo soportan (IE y Firefox son los navegadores importantes) usando someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Por último, si su sitio está utilizando HTTPS, IE se apaga automáticamente la terminación automática (al igual que algunos otros navegadores, por lo que yo sé).

Actualizar

Como esta respuesta todavía consigue bastantes upvotes, sólo quería señalar que en HTML5, puede utilizar el atributo 'autocompletar' en su elemento de formulario. Vea la documentación sobre W3C para ello.

Otros consejos

Yo estaría muy sorprendido si W3C habría propuesto una manera que trabajaría con (X) HTML 4. La función de autocompletar es totalmente basado en navegador, y fue introducido en los últimos años (bien después del estándar HTML 4 fue escrito).

No me sorprendería si HTML5 tendría uno, sin embargo.

Editar: Como pensé, HTML5 hace tiene que función. Para definir su página como HTML 5, utilice el siguiente tipo de documento (es decir: ésta como el primer texto en el código fuente). Tenga en cuenta que no todos los navegadores soportan este estándar, ya que todavía está en proyecto forma.

<!DOCTYPE html>

HTML 4 No

HTML 5 Sí

El atributo autocomplete es un atributo enumerado. el atributo tiene dos estados. La los mapas de palabras clave al estado encendido, y la de Los mapas de palabras clave en el estado de apagado. El atributo también se puede omitir. los falta valor por defecto es el Estado. La de Estado indica que por De manera predeterminada, los controles de formulario en forma tendrán su nombre de campo de relleno automático se define en de ; el estado activado indica que, por defecto, forman controles en La forma tendrá su nombre de campo autofill ajustado en "on".

Referencia: W3

No, pero navegador auto-completar menudo se desencadena por el campo con el mismo atributo name como campos que fueron llenados previamente. Si pudiera armar una forma inteligente de tener un nombre de campo aleatorio , autocompletar no sería capaz de tirar todos los valores introducidos anteriormente para el campo.

Si se va a dar a un campo de entrada un nombre como "email_<?= randomNumber() ?>", y luego tener la secuencia de comandos que recibe este bucle de datos a través de la POST o variables GET en busca de algo que coincide con el patrón "email_[some number]", se podía sacar esto adelante, y esto tendría que (prácticamente) el éxito garantizado, independientemente del navegador .

No, es un buen artículo aquí en Mozila Wiki .

Me gustaría seguir utilizando el attribute válido. Creo que aquí es donde el pragmatismo debe ganarse a validar.

¿Cómo acerca de la configuración con JavaScript?

var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false

No es perfecto, pero el código HTML será válida.

Sugiero la captura de los 4 tipos de entrada:

$('form,input,select,textarea').attr("autocomplete", "off");

Referencia:

Si utiliza jQuery, se puede hacer algo así:

$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});

y utilizar la clase autocompleteOff donde desea:

<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />

Si desea que todos los de entrada que se autocomplete=off, puede simplemente usar lo siguiente:

$(document).ready(function(){$("input").attr("autocomplete","off");});

Otra forma - lo que también ayudará con la seguridad es llamar a la caja de entrada algo diferente cada vez que se muestra que: al igual que un captha. De esa manera, la sesión puede leer la única sólo de entrada y de completado automático no tiene nada para seguir adelante.

Sólo un punto con respecto a la pregunta de rmeador de si debe estar interfiriendo con la experiencia del explorador: Desarrollamos sistemas de gestión de contactos y CRM, y cuando se está escribiendo los datos de otras personas en una forma que no queremos que constantemente lo que sugiere sus propios detalles .

Esto funciona para nuestras necesidades, pero luego tenemos el lujo de decir a los usuarios obtener un navegador decente:)

autocomplete='off'

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 de autocompletar funciona perfectamente. Para versiones anteriores, que se remonta a Netscape 6.2, funcionó con la excepción de las formas con "Dirección" y "Nombre"

Actualizar

En algunos casos, el navegador va a mantener los valores que sugiere autocompletar incluso si el atributo autocomplete está desactivada. Este comportamiento inesperado puede ser muy desconcertante para los desarrolladores. El truco para realmente obligando a la no-terminación automática es a asignar una cadena aleatoria al atributo , por ejemplo:

autocomplete="nope"

Dado que este valor aleatorio no es un valid one, el navegador se dio por vencido.

Documetation

El uso de un atributo al azar 'nombre' funciona para mí.

I reajustó el atributo de nombre al enviar el formulario por lo que aún puede acceder a él por su nombre cuando se envía el formulario. (Usando el atributo id para almacenar el nombre)

Tenga en cuenta que hay cierta confusión acerca de la ubicación del atributo de autocompletar. Se puede aplicar a la totalidad del etiqueta FORM o para las etiquetas de entrada individuales, y esto en realidad no estaba estandarizada antes de HTML5 (que permite explícitamente tanto lugares ). documentos de mayor edad más notablemente este artículo Mozilla sólo menciona etiqueta FORM. Al mismo tiempo, algunos escáneres de seguridad sólo buscarán autocompletar en etiqueta INPUT y quejarse si no se encuentra (aunque es en la forma del padre). Un análisis más detallado de este lío está publicada aquí: La confusión sobre autocomplete = OFF atributos en los formularios HTML

No es ideal, pero podría cambiar el ID y el nombre del cuadro de texto cada vez que realice un renderizado -. Habría que rastrearlo lado del servidor también, así que usted podría obtener los datos

No estoy seguro si esto va a funcionar o no, era sólo una idea.

Creo que hay una manera más sencilla. Crear una entrada oculta con un nombre aleatorio (a través de JavaScript) y establecer el nombre de usuario para eso. Repita con la contraseña. De esta manera la secuencia de comandos backend sabe exactamente lo que el nombre de campo adecuado es, mientras se mantiene autocompletar en la oscuridad.

Probablemente estoy equivocado, pero es sólo una idea.

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

Esta solución funciona conmigo:

$('form,input,select,textarea').attr("autocomplete", "nope");

si desea utilizar el relleno automático en esta región: añadir autocomplete="false" en el elemento por ejemplo:

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">

autocompletar Válido fuera

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow