it-swarm-pt.tech

Como evitar campos de preenchimento antecipado do navegador no meu formulário de registro?

autocomplete="off" não é o que eu estou procurando. Basicamente, no meu formulário de registro, existem os campos "telefone" e "senha" colocados um acima do outro. (veja a captura de tela)

O campo "phone" é pré-preenchido irritantemente com um nome de usuário, como eu acho o que o navegador está fazendo - o navegador encontra um campo do tipo senha e assume o campo de entrada de texto antes de ser um nome de usuário. O efeito é este:

registration form snapshot

Por que não estou interessado no atributo de preenchimento automático não padrão para o campo de telefone, é que desejo que o usuário possa preencher este formulário o mais facilmente possível e se já inseriu seu número de telefone em outros sites (em campos chamados "telefone"), eles podem se beneficiar com isso, quando começam a digitar no campo. É por isso que não quero desativar completamente o preenchimento automático.

Eu estava pensando mais na direção de reorganizar os campos de alguma forma para evitar esse comportamento. Ou alguma maneira de informar ao navegador que o campo acima do campo da senha não tem nada a ver com isso ou que o campo da senha não é usado para fins de autenticação. De alguma forma, marque-o assim. Ou injetar algum elemento invisível entre esses dois campos?

Alguma ideia?

Marcação usada:

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

Estou recebendo esse comportamento no Chrome, FF (não tenho certeza sobre o IE, tenho uma versão arcaica na minha máquina, nem quero começar a me preocupar com IE ainda.)

35
Peter Perháč

A maioria dos gerenciadores de senhas pesquisará o primeiro campo de senha e o campo de texto mais próximo antes dele.

Então, tudo que você precisa fazer é adicionar campos de texto e senha invisíveis (display:none) acima de "nova senha".

Firefox tenta interpretar três campos de senha como uma ação "alterar senha"; portanto, se você não quiser, deve estar seguro adicionando outro campo de senha invisível.

30
user123444555621

Eu tive um problema semelhante com o campo definir senha. Experimentar

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

Do MDN entrada documentação:

autocompletar

Este atributo indica se o valor do controle pode ser preenchido automaticamente pelo navegador.

Os valores possíveis são:

.... new-password: uma nova senha (por exemplo, ao criar uma conta ou alterar uma senha)

Para o problema do número de telefone, eu configurei isso e ele parou de preencher automaticamente o nome de usuário lá.

<input type="tel">
11
do what now

Um número residencial não pode ter 30 caracteres, provavelmente é por isso que o navegador está assumindo que poderia ser um nome de usuário ou e-mail de login devido ao tamanho. Mude para algo real e veja o que acontece.

Além disso, considere ter três campos para número de telefone, código de área, prefixo, sufixo. Depois que um determinado número de dígitos for preenchido, você poderá focar automaticamente usando JavaScript no próximo campo de segmento de telefone para facilitar o usuário.

Você também tentou mudar de posição dos campos? O que aconteceu?

Além disso, apenas para ter certeza, você pode desativar a conclusão automática de um item específico durante o registro sem se preocupar que ele será desativado durante o login (porque não será), a menos que você o tenha desativado também para os campos de login e, é claro, você não precisa.

Além disso, exclua as coisas de preenchimento automático de formulários salvos não utilizados, pode ser apenas um problema local com sua versão, você pode ter digitado um valor ruim um dia em um dos navegadores e depois instalou o outro navegador (chrome ou FF) e o navegador recém-instalado copiou as regras exatamente como eram do seu navegador original ... Então, você acaba pensando que é um problema global no seu formulário, simplesmente por causa de uma entrada incorreta e porque o seu segundo navegador instalado copiou e replicou o regra de entrada incorreta do seu primeiro navegador, fazendo com que pareça um problema real e universal para você, entendeu? Portanto, tente os modos InPrivate dos navegadores ou tente os navegadores de uma instalação diferente ou de um computador diferente ou de uma instância de pc virtual que você possa ter.

Caso contrário, exporte todas as configurações do seu navegador e desinstale-os, depois reinstale do zero o FF e o chrome, teste a sua página da Web e sinta-se à vontade para importar de volta as configurações exportadas.

Além disso, teste em IE mesmo que seja para o insight que isso pode lhe dar, entende o que quero dizer?

Espero que isso ajude, deixe-me saber como você se sai e se tiver outras perguntas.

ATUALIZAÇÃO:

Dado o método que você escolheu, o que você deve fazer é, ao renderizar o campo phone, adicionar um atributo value = "" na tag de entrada, em vez de usar JavaScript. Isso deve impedir que o pré-preenchimento ocorra sem a necessidade de usar o javascript. Agora, se você quiser dar um passo adiante, pode fazer o seguinte:

Durante o evento OnLoad de quando a página é carregada, verifique o campo do telefone usando JavaScript e, se o valor for igual a um espaço (""), substitua-o por uma sequência vazia usando JavaScript quando onLoad for acionado. Ou, se o navegador ainda estiver pré-preenchido (duvido que sim, mas será), você pode atrasar essa verificação em algumas centenas de milissegundos e executar o javascript algumas centenas de milissegundos após o carregamento da página, ou vinculá-lo a todos ou a alguns dos os campos de entrada nos eventos Focus, assim que qualquer um dos campos ganhar foco, você faz o "does phone.value igual a um caractere de espaço (" ")) e, se isso ocorrer, substitua-o por uma string vazia, estou ainda mais certo que o navegador não entrará e seqüestrará esse campo nessa situação.Embora, como mencionado, mesmo se você fizer isso no Load, duvido que o navegador seqüestrará seu campo, pois as páginas/javascript onload ocorrem APÓS os navegadores internos O evento onLoad (DocumentComplete) ocorre e, na pior das hipóteses, você pode fazer o atraso de algumas centenas de milissegundos ou o método onFocus, mas duvido que você precise deles.

Deixe-me saber como vai.

2
Erx_VB.NExT.Coder

Tentei desabilitar os campos de entrada type = text & type = password após o carregamento do DOM e habilitei todos os campos desabilitados após determinados milissegundos, digamos 100. Parece que está funcionando para mim. Experimentar :

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

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