Skip to main content
1 de 2
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334

Você pode utilizar o atributo placeholder para colocar o texto que só vai aparecer quando o campo estiver vazio:

<input type="text" placeholder="Pesquisar..." name="q" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />

Segundo o caniuse.com esse atributo é suportado por todo navegador na sua versão corrente, exceto o Opera Mini (IE9 ou anterior não dá suporte).

Se você precisa que uma solução funcione em navegdores antigos, sugiro usar as próprias funções onfocus e onblur pra tratar disso - ao receber o foco, o placeholder é escondido; ao perder o foco, se o tamanho do valor for zero o placeholder é recolocado. (a alternativa seria fazer isso no onkeyup, de modo que somente quando o usuário começar mesmo a digitar o placeholder sumiria, mas não acho uma boa ideia, por vários motivos)

Você ainda teria de guardar em algum lugar a informação "o input está vazio ou não?" para decidir se o que está no input é um placeholder ou somente um texto que por coincidência é igual ao placeholder... Na falta de um lugar melhor, sugiro colocar como um atributo data-*. Ex.:

<input type="text" value="Pesquisar..." data-vazio="sim" name="q" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />

E é claro, manter esse atributo atualizado à medida que o usuário modifica o input (isso pode ser feito no próprio onblur, ou talvez no onchange).

mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334