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
).
Atualização: ou melhor ainda, use uma classe CSS para monitorar isso, assim além do controle que você precisa você ainda ganha "de graça" a oportunidade de alterar o estilo do input (por exemplo, fazendo a letra ficar cinza se estiver lá só o placeholder).
<input type="text" value="Pesquisar..." class="vazio" name="q" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
CSS:
input.vazio {
color: lightgray;
}
(lembrando que um elemento pode ter mais de uma classe, se necessário: class="classe1 classe2 classe3"
)