Existe uma W3C forma válida para desativar o preenchimento automático em um formulário HTML?

https://stackoverflow.com/questions/582244

06-09-2019
|

Pergunta

Ao usar o doctype xhtml1-transitional.dtd, coletando um número de cartão de crédito com o seguinte HTML

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

vontade bandeira um aviso no validador do W3C:

não há nenhum atributo "preenchimento automático".

Existe uma W3C way / normas para desativar navegador de auto-completar em campos sensíveis em um formulário?

Solução

Aqui é um bom artigo do MDC que explica os problemas (e soluções) para formar autocompletar. Microsoft publicou algo aqui , também.

Para ser honesto, se isso é algo importante para seus usuários, 'quebrar' os padrões desta forma parece adequado. Por exemplo, a Amazon usa o atributo 'autocomplete' um pouco, e ele parece funcionar bem.

Se você quiser remover o aviso completo, você pode usar JavaScript para aplicar o atributo para navegadores que suportam-lo (IE e Firefox são os navegadores importantes) usando someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Finalmente, se o seu site está usando HTTPS, IE desliga automaticamente autocompletar (como fazem alguns outros navegadores, tanto quanto eu sei).

Atualizar

Como esta resposta ainda recebe muito poucas upvotes, eu só queria salientar que em HTML5, você pode usar o atributo 'autocomplete' no seu elemento de formulário. Veja a documentação no W3C para ele.

Outras dicas

Eu ficaria muito surpreso se W3C teria proposto uma forma que iria trabalhar com (X) HTML4. O recurso de preenchimento automático é totalmente baseado em browser, e foi introduzido durante os últimos anos (bem após o padrão HTML4 foi escrito).

não ficaria surpreso se HTML5 teria um, no entanto.

Editar: Como eu pensei, HTML5 não tem essa característica . Para definir sua página como HTML5, use o seguinte tipo de documento (ou seja: colocar isso como o primeiro texto em seu código-fonte). Note que nem todos os navegadores suportam esse padrão, como ele ainda está em projecto-forma.

<!DOCTYPE html>

HTML 4 : Não

HTML 5 : Sim

O atributo autocomplete é um atributo enumerado. o atributo tem dois estados. O em mapas de palavra-chave para o estado ligado, e o off palavra-chave mapeia para o estado desligado. O atributo pode também ser omitido. o faltando padrão valor é o em Estado. O off estado indica que pelo padrão, controles de formulário no formulário terá seu nome do campo de preenchimento automático conjunto para off ; o em estado indica que, por padrão, formar controles a forma terão o seu nome do campo autofill definido para "ON".

Referência: W3

Não, mas o navegador auto-complete é frequentemente desencadeado pelo campo com o mesmo atributo name como campos que foram previamente preenchidos. Se você pudesse sonda até uma maneira inteligente de ter um nome do campo randomizado , autocomplete não seria capaz de puxar todos os valores inseridos anteriormente para o campo.

Se você fosse dar um campo de entrada um nome como "email_<?= randomNumber() ?>", e depois ter o script que recebe este circuito de dados através do POST ou GET variáveis ??procurando algo que corresponda ao padrão "email_[some number]", você poderia conseguir isso, e isso teria (praticamente) sucesso garantido, independentemente do navegador .

Não, um bom artigo é aqui em Mozila Wiki .

Gostaria de continuar a usar o attribute inválido. Acho que este é o lugar onde o pragmatismo deve conquistar validação.

Como cerca de defini-lo com JavaScript?

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

Não é perfeito, mas o seu HTML será válido.

Eu sugiro pegar todos os 4 tipos de entrada:

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

Referência:

Se você usar jQuery, você pode fazer algo assim:

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

e usar a classe autocompleteOff onde você quer:

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

Se você quiser todas as suas entradas para ser autocomplete=off, você pode simplesmente usar o seguinte:

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

Outra forma - que também irá ajudar na segurança é chamar a caixa de entrada algo diferente a cada vez que você exibi-lo: apenas como um captha. Dessa forma, a sessão pode ler o one-time única entrada e Auto-Complete não tem nada a ir em frente.

Apenas um ponto sobre a pergunta de rmeador de saber se você deve estar interferindo com a experiência do navegador: Desenvolvemos sistemas de Gerenciamento de contatos & CRM, e quando você está digitando dados de outras pessoas em uma forma que você não quer que ele constantemente sugerindo seus próprios detalhes .

Este obras para as nossas necessidades, mas, em seguida, temos o luxo de dizer aos usuários obter um navegador decente:)

autocomplete='off'

autocomplete="off" isso deve corrigir o problema para todos os navegadores modernos.

<form name="form1" id="form1" method="post" autocomplete="off"
   action="http://www.example.com/form.cgi">
  [...]
</form>

Nas versões atuais de navegadores Gecko, o atributo autocomplete funciona perfeitamente. Para versões anteriores, voltando a Netscape 6.2, ele trabalhou com a exceção de formulários com "Endereço" e "Nome"

Atualizar

Em alguns casos, o navegador irá manter os valores de completação automática, sugerindo mesmo que o atributo autocomplete está definido para fora. Este comportamento inesperado pode ser bastante intrigante para os desenvolvedores. O truque para realmente forçar a não-autocompletar é atribuir uma seqüência aleatória para o atributo , por exemplo:

autocomplete="nope"

Uma vez que este valor aleatório não é um valid one, o navegador vai desistir.

documetation

Usando um 'nome' aleatória atributo funciona para mim.

Eu redefinir o atributo nome quando enviar o formulário para que você possa acessá-lo pelo nome quando o formulário é enviado. (Usando o atributo id para armazenar o nome)

Note que há alguma confusão sobre a localização do atributo autocomplete. Ele pode ser aplicado a toda a tag FORM ou etiquetas de entrada individuais, e isso não foi realmente padronizados antes HTML5 (que explicitamente permite que tanto locais ). docs mais velhos mais notavelmente este artigo Mozilla apenas menciona tag FORM. Ao mesmo tempo, alguns scanners de segurança só olhar para preenchimento automático em tag INPUT e reclamar se estiver faltando (mesmo que é no formulário pai). Uma análise mais detalhada desta confusão é postado aqui: A confusão sobre autocomplete = OFF atributos em formulários HTML

Não é o ideal, mas você pode mudar o ID eo nome da caixa de texto cada vez que você torná-lo -. Você tem que segui-lo do lado do servidor para que você também pode obter os dados

Não tenho certeza se isso vai funcionar ou não, era apenas um pensamento.

Eu acho que há uma maneira mais simples. Criar uma entrada escondida com um nome aleatório (via javascript) e definir o nome de usuário para isso. Repita com a senha. Desta forma o seu roteiro backend sabe exatamente o que o nome do campo apropriado é, mantendo autocomplete no escuro.

Eu sou provavelmente errado, mas é apenas uma idéia.

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 solução trabalha comigo:

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

Se você quiser usar o preenchimento automático nesta região: adicionar autocomplete="false" no elemento ex:

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

Válido autocomplete off

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

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow