21.12.2024

Mudando o Texto do Placeholder com JavaScript e jQuery

Resposta Rápida

Para mudar o texto do placeholder em um elemento de entrada HTML, defina o valor do atributo placeholder diretamente no campo de entrada:

<input type="text" placeholder="Digite seu nome">

Ou, se precisar modificar um elemento existente, use JavaScript para atualizá-lo dinamicamente:

document.querySelector('input').placeholder = 'Digite seu nome';

Certifique-se de especificar seletores para atualizar o campo de entrada correto via JavaScript.

JavaScript ou jQuery: Escolha Sua Ferramenta

JavaScript: Confiabilidade e Precisão

Com JavaScript, você pode controlar com precisão o valor do placeholder. Para selecionar um campo de entrada, use o método document.getElementsByName():

// JavaScript - o caminho para quem traçou seu próprio percurso desde 1995
document.getElementsByName('email')[0].placeholder = 'Seu novo texto de placeholder para email';

Se o elemento for único, aplique document.getElementById():

// Cada ID único tem sua própria história
document.getElementById('primeiro-nome').placeholder = 'João';

Para tornar o novo texto do placeholder mais claro, limpe primeiro o campo de seu valor anterior:

let campoDeEntrada = document.getElementById('sobrenome');
campoDeEntrada.value = ''; // Limpa o campo
campoDeEntrada.placeholder = 'Silva'; // Define o novo placeholder

jQuery: Simplificação em Ação

Use o método .attr() no jQuery para uma mudança simples e concisa do texto do placeholder:

// jQuery: seu assistente confiável no dia a dia!
$('input[name="email"]').attr('placeholder', 'Digite seu email');

Com jQuery, você pode mudar o texto do placeholder para todos os campos de entrada ao mesmo tempo:

// jQuery - faça mais com menos ações!
$('input:text').attr('placeholder', 'Novo placeholder para todos os campos de texto');

Não se esqueça de incluir a biblioteca jQuery antes de usá-la:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Uso Eficaz de Placeholders

Um Placeholder é um Auxiliar, Não um Confusor!

Um placeholder eficaz fornece orientação clara e específica ao usuário. Pare de usar frases abstratas; em vez disso, defina placeholders específicos:

// Programar placeholders é criatividade!
document.getElementById('email-cadastro').placeholder = 'exemplo@dominio.com';
document.getElementById('pesquisa').placeholder = 'O que estamos procurando?';

Teste Após Aplicação: Controle de Qualidade

Uma vez que você tenha mudado o texto do placeholder, verifique sua funcionalidade em diferentes navegadores. Assegure-se de que o placeholder não apareça como dados pré-preenchidos para evitar confusão do usuário.

Instruções Devem Ser Claras

Descreva os placeholders de uma maneira que responda às perguntas do usuário e simplifique a entrada de informações.

Visualização

Você pode mudar o texto do placeholder tão facilmente quanto um camaleão muda de cor:

<input type="text" placeholder="Digite seu nome...">

E aqui está, um camaleão instantaneamente transformado:

<input type="text" placeholder="Pesquisar...">

Com apenas um pequeno ajuste, seu campo de entrada se transforma e adquire um significado completamente novo! 🎭

Mergulhando no Mundo dos Placeholders

Precisão dos Seletores: A Importância dos Detalhes

Use seletores de nome, id ou classe para escolher elementos de entrada quando precisar especificar mudanças de placeholder:

// Seletor de nome: O que há em um nome?
document.getElementsByName('idade-usuario')[0].placeholder = 'Idade';

// Seletor de ID: A exclusividade é a chave do seu sucesso!
document.getElementById('cidade-usuario').placeholder = 'Cidade';

// Seletor de classe: Somos multifuncionais!
document.querySelector('.comentario-usuario').placeholder = 'Comentário';

Estilizando Placeholders: Vista-os com Elegância

Você pode estilizar placeholders com CSS para melhorar a interação do usuário:

::placeholder {
  color: gray; // Existe mais de um tom de cinza!
  font-style: italic; // Itálico destaca o texto de maneira elegante!
}

Placeholders Dinâmicos: Acompanhando os Usuários

Em formulários dinâmicos, os placeholders podem guiar os usuários. Atualize-os com base nas ações do usuário.

Acessibilidade: Placeholders Não Substituem Rótulos

Lembre-se de que placeholders e rótulos servem a funções diferentes em termos de acessibilidade. Todos os campos de entrada devem ter rótulos <label> devidamente associados.

Recursos Úteis

1. <input>: O Elemento de Entrada - HTML: Linguagem de Marcação de Hipertexto | MDN — Um guia abrangente sobre o elemento HTML <input> no MDN, incluindo descrição dos placeholders.
2. Atributo Placeholder do HTML — Visão geral e exemplos de uso do atributo placeholder na W3Schools.
3. ::placeholder | CSS-Tricks — Um artigo do CSS-Tricks dedicado a estilizar ::placeholder.
4. Padrão HTML — Especificação detalhada do atributo placeholder no Padrão HTML Vivo.
5. “placeholder” | Can I use... Tabelas de suporte para HTML5, CSS3, etc — Tabelas de suporte para funcionalidade de placeholder em vários navegadores no Can I use.
6. Como Mudar a Cor do Placeholder — Uma lição da W3Schools sobre como mudar a cor do texto do placeholder.
7. Propriedades e métodos de formulário — Materiais úteis sobre elementos de controle de formulários, foco e eventos de entrada no JavaScript.info.

Video

Navigation