Substituir preenchimento de formulário do navegador e destaque de entrada com HTML / CSS

139

Eu tenho 2 formulários básicos - entre e inscreva-se, ambos na mesma página. Agora, não tenho problemas com o preenchimento automático do formulário de login,~~mas o formulário de inscrição também é preenchido automaticamente, e eu não gosto disso.~~

Além disso, os estilos de formulário têm um fundo amarelo que não consigo substituir e não quero usar CSS embutido para fazer isso. O que posso fazer para que eles parem de ser amarelados~~e (possivelmente) preenchimento automático~~? Desde já, obrigado!

html css input autofill casraf
fonte

4

Você realmente está fazendo duas perguntas aqui: Como desativar o preenchimento automático de formulários? - e - Como substituir o fundo amarelo quando o preenchimento automático de formulário está ativado? Isso não ficou claro até que eu li todos os comentários nas respostas abaixo. Você pode querer editar sua pergunta (especialmente porque você chegou ao ponto de oferecer uma recompensa).

benzado

Você está certo, editado. Ou uma versão preguiçosa de qualquer maneira.

casraf

1

Como usuário do formulário, eu odiaria ter minha usabilidade prejudicada por causa de suas preferências visuais, forçando a conclusão automática e o destaque. Deixe o usuário desligar isso, não você. Deixe minha experiência de navegação em paz.

Byran Zaugg

É isso, apenas desabilitei o preenchimento automático no formulário REGISTRATION, que basicamente não deve ter preenchimento automático regular, as informações de conclusão são criadas apenas quando você se inscreveu. Quanto ao formulário de login, quero manter o preenchimento automático ativado, mas desabilite a cor muda que coloca nos campos de entrada, porque o texto dentro fica ilegível - o fundo é amarelo e a cor do texto é branca (o fundo original é cinza escuro) .

casraf

1

possível duplicata do Google Chrome preenchimento automático de formulários e seu fundo amarelo

zzzzBov

163

para o preenchimento automático, você pode usar:

<form autocomplete="off">

em relação ao problema de coloração:

da sua captura de tela, posso ver que o webkit gera o seguinte estilo:

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1) como # id-styles são ainda mais importantes que .class, o seguinte pode funcionar:

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) se isso não funcionar, você pode tentar definir o estilo via javascript programaticamente

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) se isso não funcionar, ~~você está condenado :-)~~ considere o seguinte: isso não oculta a cor amarela, mas torna o texto legível novamente.

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4) uma solução css / javascript:

css:

input:focus {
    background-position: 0 0;
}

e o seguinte javascript deve ser executado onload:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

por exemplo:

<body onload="loadPage();">

boa sorte :-)

5) Se nenhum dos trabalhos acima tentar remover os elementos de entrada, cloná-los e colocar os elementos clonados de volta na página (funciona no Safari 6.0.3):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) A partir daqui :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

Phil Rykoff
fonte

(1) não funciona. Vou tentar (2) quando voltar para casa; espero que o JS possa substituir isso; Obrigado :)

casraf

1

(4) remove definitivamente a borda amarela: foco.

Ruruskyi

Se o último bit não funcionar para você, e você sabe como o javascript funciona (acertou o ID, etc.) Você pode ter o problema que eu tive, estou usando o jquery mobile por alguns motivos e isso é iniciado mais tarde e substitui as entradas parece. Então, o que fiz foi definir um intervalo que o clona a cada 50 ms (funcionou após 400ms usando setTimeout, mas não quero arriscar conexões lentas). E depois de um segundo intervalo é removido:code

Mathijs Segers

var keepTheInputCloned = setInterval(function(){                          var e = document.getElementById('id_email');             var ep = e.parentNode;             ep.removeChild(e);             var e2 = e.cloneNode();             ep.appendChild(e2);              var p = document.getElementById('id_password');             var pp = p.parentNode;             pp.removeChild(p);             var p2 = p.cloneNode();             pp.appendChild(p2);         },50);         setTimeout(function(){clearInterval(keepTheInputCloned)},1000);

Mathijs Segers

Estou tendo um problema semelhante com o Safari no Mavericks. Mas quando eu uso o método 5, eles duram um segundo (ou três segundos quando eu defino o tempo limite para 3000) e, em seguida, o navegador vence e o preenchimento automático está ativado. No meu caso de uso, estou pedindo ao usuário seu nome de usuário / senha para outro site, para que eu possa obter informações de outro site, então definitivamente não quero que ele preencha automaticamente o nome de usuário e a senha que eles usam no meu site. Alguma idéia sobre isso (além da destruição do original nº 3)?

Jack RG

218

Engane-o com uma sombra interna "forte":

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}

Tamás Pap
fonte

10

Isso é realmente inteligente. :)

Jordan Gray

3

+1000 (se eu pudesse) Sim, eu não consigo encontrar outra maneira de fazer isso. Isso é realmente intrusivo para o webkit ... #

14_13

1

incrível este deve ser o número um resposta, simples e eficaz

Pixelomo

3

Isso é incrível, pois funciona e é realmente criativo. Mas isso me lembra antigos hacks do IE6 e similares. Um pouco ruim do google para nos dar um parâmetro: -webkit-autofill e não permitir que os designers substituam o padrão, certo?

Squarecandy

1

Fornecer uma escolha de cores que não pode ser personalizada não ajuda a usabilidade nem a acessibilidade. Essas preocupações ainda estão inteiramente nas mãos do desenvolvedor, exceto por esse frustrante hack no Chrome. Ninguém pode culpar a intenção dos desenvolvedores do Chrome, apenas os resultados.

Lunster 7/01

25

Adicione esta regra CSS e a cor amarela do plano de fundo desaparecerá. :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

MCBL
fonte

1

Isso funcionou para mim - obrigado! (embora eu precisava mudar de branco para a cor que eu realmente queria)

jennEDVT

2

Claramente a melhor resposta.

Brandon Harris

16

<form autocomplete="off">

Praticamente todos os navegadores modernos respeitarão isso.

Jason Kester
fonte

7

Incrível, mas só resolve a questão menos importante; como posso manter a conclusão automática, mas perder o webkit de estilo ( prntscr.com/4hkh ) enfia sua garganta? o: obrigado embora

casraf 25/02

1

Na verdade, deve fazer as duas coisas. A caixa fica amarela apenas para informar que o chrome / safari / ff a preencheu automaticamente com sua senha. Se você disser para não preencher, não terá a chance de colori-lo.

Jason Kester

11

sim, mas olhar para o que eu disse: "como eu posso manter auto completa, mas perder o estilo empurrões webkit"

casraf

Apenas problema com autocompleteé que é inválida no HTML antes da versão 5.

Paul D. Waite

15

Após 2 horas de pesquisa, parece que o Google Chrome ainda substitui a cor amarela, mas encontrei a correção. Também funcionará para foco instantâneo, etc. Tudo que você precisa fazer é adicionar !importanta ele.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

isso removerá completamente a cor amarela dos campos de entrada

não
fonte

Funciona para mim sem 1000px, apenas 0 em todos os lugares, -webkit-box-shadow: 0 0 0 0 inserção branca! Importante;

Luis Lopez

3

Você também pode alterar o atributo name dos elementos do formulário para que seja gerado algo, para que o navegador não o acompanhe. No entanto, o firefox 2.x + e o google chrome parecem não ter muitos problemas com isso, se o URL da solicitação for idêntico. Tente adicionar basicamente um parâmetro de solicitação de sal e um nome de campo de sal para o formulário de inscrição.

No entanto, acho que o preenchimento automático = "off" ainda é a melhor solução :)

Dmitriy Likhten
fonte

3

Você pode desativar o preenchimento automático a partir do HTML5 (via autocomplete="off"), mas NÃO PODE substituir o realce do navegador. Você pode tentar mexer com ::selectionCSS (a maioria dos navegadores exige um prefixo de fornecedor para que isso funcione), mas isso provavelmente também não ajudará.

A menos que o fornecedor do navegador tenha implementado especificamente uma maneira específica de substituí-lo, você não pode fazer nada sobre esses estilos que já pretendem substituir a folha de estilo do site para o usuário. Geralmente, eles são aplicados após a aplicação das folhas de estilo e também ignoram as ! importantsubstituições.

Alan Plum
fonte

3

Às vezes, o preenchimento automático no navegador ainda é concluído automaticamente quando você tem apenas o código no <form>elemento

Tentei colocá-lo no <input>elemento também e funcionou melhor.

<form autocomplete="off">  AND  <input autocomplete="off">

No entanto, o suporte para esse atributo está cessando. Leia https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

Outro trabalho que descobri foi remover espaços reservados dentro dos campos de entrada que sugerem que é um campo de email, nome de usuário ou telefone (por exemplo, "Seu email", "Email" etc.)

insira a descrição da imagem aqui

Isso faz com que os navegadores não saibam que tipo de campo é, portanto, não tente preenchê-lo automaticamente.

andstud.io
fonte

O que eu mais gosto é que a maioria das pessoas NÃO apreciaria que todo o formulário não fosse preenchido em uma página recarregada (por exemplo, uma área de texto longa), mas permite que o desenvolvedor impeça o preenchimento de certos elementos (por exemplo, número do cartão do banco). Irritantemente porém, suporte para esse atributo é cessar

Luke Madhanga

1

Se estiver no campo de entrada, você está tentando "desmarcar" ...

Defina uma cor de fundo com css ... digamos #ccc (cinza claro).
Adicione valor = "sometext", que preenche temporariamente o campo com "sometext"
(opcional) Adicione um pouco de javascript para tornar o "sometext" claro quando você inserir o texto real.

Então, pode ficar assim:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />

cavalo branco
fonte

1

Isso corrige o problema no Safari e no Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Arjan
fonte

1

Eu acredito que sim, mas não seria um pouco duro fazer isso 50 vezes por segundo? Eu sei que vai funcionar e não será muito lento. Mas parece um pouco demais.

Mathijs Segers

0

A captura de tela à qual você vinculou diz que o WebKit está usando o seletor input:-webkit-autofillpara esses elementos. Você já tentou colocar isso no seu CSS?

input:-webkit-autofill {
    background-color: white !important;
}

Se isso não funcionar, provavelmente nada funcionará. Esses campos são realçados para alertar o usuário de que eles foram preenchidos automaticamente com informações privadas (como o endereço residencial do usuário) e pode-se argumentar que permitir que uma página oculte está permitindo um risco à segurança.

benzado
fonte

0

O formelemento possui um autocompleteatributo que você pode definir off. No CSS, a !importantdiretiva após uma propriedade impede que ela seja substituída:

background-color: white !important;

Somente o IE6 não entende isso.

Se eu entendi errado, também há a outlinepropriedade que você pode achar útil.

zneak
fonte

2

O Chrome parece ignorar o! Importante quando ele

preenche

@ Torandi Pode ser por causa das folhas de estilo do agente do usuário. As configurações das folhas de estilo do agente do usuário devem ser aplicadas por último, a menos que tenha a !importantdiretiva; nesse caso, ela tem precedência sobre todo o resto. Você deve verificar a folha de estilo do agente do usuário (embora eu não saiba onde encontrá-la).

usar o seguinte comando

0

Vi o recurso de preenchimento automático da barra de ferramentas do Google desativado com javascript. Pode funcionar com outras ferramentas de preenchimento automático; Não sei se isso ajudará nos navegadores criados no preenchimento automático.

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>

Adão
fonte

0

Depois de tentar várias coisas, encontrei soluções de trabalho que usurpavam os campos preenchidos automaticamente e os substituíam por duplicados. Para não perder eventos anexados, eu vim com outra solução (um pouco longa).

Em cada evento de "entrada", ele anexa rapidamente eventos de "alteração" a todas as entradas envolvidas. Ele testa se eles foram preenchidos automaticamente. Se sim, despache um novo evento de texto que induza o navegador a pensar que o valor foi alterado pelo usuário, permitindo remover o fundo amarelo.

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});

Ernests Karlsons
fonte

0

Solução javascript simples para todos os navegadores:

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

Clone a entrada, redefina o atributo e oculte a entrada original. É necessário tempo limite para o iPad

Ácaro
fonte

0

Como o navegador procura campos de tipo de senha, outra solução alternativa é incluir um campo oculto no início do seu formulário:

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />

Kt Mack
fonte

0

Eu li muitos tópicos e tentei muitos pedaços de código. Depois de reunir todas essas coisas, a única maneira que encontrei para esvaziar de maneira limpa os campos de login e senha e redefinir o plano de fundo para branco foi o seguinte:

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

Sinta-se livre para comentar, estou aberto a todas as melhorias, se você encontrar algumas.

TwystO
fonte

0

O preenchimento automático desativado não é suportado por navegadores modernos. A maneira mais fácil de resolver o preenchimento automático que encontrei foi uma pequena faixa com HTML e JS. A primeira coisa a fazer é alterar o tipo de entrada em HTML de 'senha' para 'texto'.

<input class="input input-xxl input-watery" type="text" name="password"/>

O preenchimento automático é iniciado após o carregamento da janela. Isso está ok. Mas quando o tipo do seu campo não é 'senha', o navegador não sabia quais campos devem ser preenchidos. Portanto, não haverá preenchimento automático nos campos do formulário.

Depois disso, vincule o evento focusin ao campo da senha, por ex. em Backbone:

'focusin input[name=password]': 'onInputPasswordFocusIn',

Em onInputPasswordFocusIn, basta alterar o tipo do seu campo para senha, basta verificar:

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

É isso aí!

UPD: essa coisa não funciona com o JavaSciprt desativado

UPD em 2018. Também encontrou algum truque engraçado. Defina o atributo readonly no campo de entrada e remova-o no evento de foco. Primeiro, impeça o navegador de preencher automaticamente os campos; o segundo permitirá a entrada de dados.

volodymyr3131
fonte

O preenchimento automático é parte do padrão, embora seu uso e implementação possam variar. Além disso, a alteração dos tipos de entrada no IE falha espetacularmente, e é por isso que o jQuery o bloqueia, mas geralmente não é uma boa ideia se você planeja dar suporte ao desenvolvedor do

IE.mozilla.org/en-US/docs/Web/Security/…

@casraf Desculpe, faz parte do padrão, mas não funciona em todos os navegadores modernos como deve, por isso não fará o que foi inventado. No EDGE funciona bem, as versões anteriores não podem dizer nada (

volodymyr3131 18/01

É verdade que não é implementado em todos os lugares. O problema ainda permanece - dependendo de quanto tempo você deseja dar suporte ao IE - antes da v 11, não acredito que você possa alterar o tipo de entrada. Se você não está preocupado com as versões antigas, pode usá- autocomplete=offlo, pois funciona no FF, Chrome por um tempo e no IE, como na versão anterior

casraf

Tentei usar autocomplete = off, tanto para entradas quanto para formulários, e o Chrome ainda preenche os dados dos formulários de inscrição e de entrada (. Isso é apenas um tipo de mágica estranha, porque com base nos comentários, em alguns casos, funciona e em alguns não faz =)

volodymyr3131

Eu sei, esses padrões realmente não estão sendo seguidos consistentemente. É uma pena, torna a nossa vida mais difícil :(

casraf

0

Por favor, tente com autocomplete = "none" na sua tag de entrada

Isso funciona para mim

Vayodya Tamari
fonte

0

Também tive que alterar a cor do texto para algo mais escuro (consulte Cores escuras do tema StackOverflow).

Então, acabamos com um híbrido da solução @ Tamás Pap, @MCBL e @ don:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}

Andrei
fonte

-3

Por que não colocar isso no seu css:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

Isso deve cuidar do seu problema. Embora isso suscite um problema de usabilidade, porque agora o usuário não pode ver que o formulário foi preenchido automaticamente da maneira como está acostumado.

[edit] Depois de postar isso, vi que uma resposta semelhante já havia sido dada e que você comentou que não funcionava. Não vejo bem o porquê, porque funcionou quando o testei.

Kris
fonte

não funciona no chrome e no safari. estilo é input:-webkit-autofille input --webkit-autocompletesimplesmente não existe

ruruskyi

@EliseuMonar: Tenho certeza de que não estava mentindo, mas não consigo me lembrar de detalhes de como ou onde o testei. O código em si provavelmente foi digitado na memória, não copiado / colado, portanto, preenchimento automático vs. preenchimento automático? Não sei.

Kris

-3

O verdadeiro problema aqui é que o Webkit (Safari, Chrome, ...) tem um bug. Quando houver mais de um [formulário] na página, cada um com um [tipo de entrada = "texto" nome = "foo" ...] (ou seja, com o mesmo valor para o atributo 'nome'), quando o usuário retornar para a página, o preenchimento automático será feito no campo de entrada do PRIMEIRO [formulário] na página, não no [formulário] enviado. Na segunda vez, o NEXT [formulário] será preenchido automaticamente e assim por diante. Somente [formulário] com um campo de texto de entrada com o mesmo nome será afetado.

Isso deve ser relatado aos desenvolvedores do Webkit.

O Opera preenche automaticamente o [formulário] correto.

O Firefox e o IE não preenchem automaticamente.

Então, eu digo novamente: isso é um bug no Webkit.

Per Lindberg
fonte

Substituir preenchimento de formulário do navegador e destaque de entrada com HTML / CSS

Respostas: