Texto de Placeholder que Desaparece Automaticamente ao Focar: CSS/jQuery
Resposta Rápida
Para ocultar o texto do placeholder imediatamente ao focar, aplique a seguinte regra CSS:
/* Desaparece misteriosamente, como minha animação nas segundas-feiras */
input:focus::placeholder { opacity: 0; }A combinação do pseudo-elemento ::placeholder com o seletor :focus torna o texto do placeholder transparente assim que o usuário começa a digitar.
Compatibilidade entre Navegadores (ou "Por que não conseguimos nos entender?")
Navegar pela compatibilidade entre navegadores pode ser complicado. Para garantir que seu método funcione em todos os navegadores, adicione prefixos de fornecedor:
/* Uma rede de segurança para quem está preparado para surpresas */
input:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome/Opera/Safari */
input:focus::-moz-placeholder { opacity: 0; } /* Firefox 19+ */
input:focus:-moz-placeholder { opacity: 0; } /* Firefox 4-18 */
input:focus:-ms-input-placeholder { opacity: 0; } /* Internet Explorer 10+ */Dessa forma, a experiência do usuário será contínua, independentemente do navegador utilizado.
Desaparecimento Suave do Texto do Placeholder com Efeitos de Transição
Para tornar o desaparecimento do placeholder mais suave, para que não assuste o usuário:
/* Nuances sutis de uma transição suave em CSS */
input::placeholder {
transition: opacity 0.3s;
}Com a propriedade transition, o texto do placeholder irá desaparecer gradualmente, como minhas resoluções de Ano Novo.
Adicionando Rótulos para Melhor Acessibilidade
Para melhorar a acessibilidade, às vezes é benéfico usar um conjunto de três elementos: o campo de entrada, o texto do placeholder e um rótulo:
/* Assim como um encontro romântico, o terceiro elemento é às vezes necessário */
label.overlabel {
position: absolute;
pointer-events: none;
transition: opacity 0.3s;
}
input:focus + label.overlabel {
opacity: 0;
}Aqui, rótulos que imitam placeholders melhoram a experiência visual e oferecem suporte a tecnologias assistivas.
Visualização
Tenha uma ideia visual de como seu placeholder deve funcionar:
🏡 <input placeholder="🎅 Digite aqui...">
🏡 <input>:focus::placeholder {
opacity: 0; // 🎅 desaparecendo silenciosamente pela chaminé!
}Agora o placeholder desaparece ao focar, sem distrair o usuário.
jQuery: Porque nunca se tem código bom demais
Se você preferir jQuery, pode alcançar o mesmo efeito assim:
/* jQuery em ação - agora todos já sabem como ocultar o placeholder */
$('input').on('focusin', function(){
$(this).data('placeholder', $(this).attr('placeholder'));
$(this).attr('placeholder', '');
});
$('input').on('focusout', function(){
$(this).attr('placeholder', $(this).data('placeholder'));
});Essa abordagem mantém o texto do placeholder até que desapareça e o restaura após a perda do foco.
Anular Estilos Padrão do Navegador com -webkit-appearance: none
Às vezes, os estilos padrão do navegador podem interferir nas suas intenções:
/* Está tudo em nossas mãos */
input {
-webkit-appearance: none;
/* ...adicione nossos estilos... */
}A propriedade -webkit-appearance: none; ignora os estilos padrão do navegador, permitindo que você mantenha seu design desejado.
Playground Interativo para Testes
A melhor maneira de testar novas ideias é experimentar em condições reais. Use JSFiddle ou Stack Snippets para testar e ajustar seu código, considerando possíveis problemas de compatibilidade.
Recursos Úteis
- Elemento Input (Campo de Entrada) - HTML | MDN: Conhecimento é poder... especialmente quando se trata do guia MDN sobre placeholders.
- ::placeholder | CSS-Tricks: Para quem deseja se aprofundar em como os placeholders funcionam no CSS.
- Evento Focus | Documentação da API jQuery: Familiarizar-se com jQuery começa com a consulta à documentação oficial.
- Seletores de Nível 4: Aprenda CSS junto com a mais recente especificação W3C sobre pseudo-classes.