Skip to main content
added 604 characters in body
Fonte Link
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).

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")

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).

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")

Fonte Link
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).