Como faço para que uma caixa de texto HTML mostre uma dica quando vazia?

Quero que a caixa de pesquisa na minha página da Web exiba a palavra "Pesquisar" em itálico cinza. Quando a caixa recebe o foco, ela deve se parecer com uma caixa de texto vazia. Se já houver texto nele, ele deverá ser exibido normalmente (preto, sem itálico). Isso me ajudará a evitar confusão ao remover o rótulo.

BTW, esta é uma pesquisa Ajax na página , por isso não possui botão.

Outra opção, se você está feliz por ter esse recurso apenas para navegadores mais recentes, é usar o suporte oferecido pelo atributo de espaço reservado do HTML 5 :

<input name="email" placeholder="Email Address">

Na ausência de estilos, no Chrome isso se parece com:

Você pode experimentar demos aqui e no HTML5 Placeholder Styling with CSS .

Certifique-se de verificar a compatibilidade do navegador desse recurso . Suporte no Firefox foi adicionado na versão 3.7. Chrome está bem. O Internet Explorer adicionou suporte apenas em 10. Se você segmentar um navegador que não suporta espaços reservados de entrada, poderá usar um plug-in jQuery chamado jQuery HTML5 Placeholder e, em seguida, basta adicionar o seguinte código JavaScript para habilitá-lo.

$('input[placeholder], textarea[placeholder]').placeholder();

Isso é conhecido como marca d'água da caixa de texto e é feito via JavaScript.

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-Compatible).aspx

ou se você usa jQuery, uma abordagem muito melhor:

• http://digitalbush.com/projects/watermark-input-plugin/
• ou code.google.com/p/jquery-watermark

Você pode definir o espaço reservado usando o placeholderatributo em HTML ( suporte ao navegador ). O font-stylee colorpode ser alterado com CSS (embora o suporte ao navegador seja limitado).

input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
 color:gray;
 font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
 color:gray;
 font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
 color:gray;
 font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
 color:gray;
 font-style:italic;
}

<input placeholder="Search" type="search" name="q">

Você pode adicionar e remover uma classe CSS especial e modificar o valor de entrada onfocus/ onblurcom JavaScript:

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

Em seguida, especifique uma classe de dica com o estilo desejado em seu CSS, por exemplo:

input.hint {
    color: grey;
}

A melhor maneira é conectar seus eventos JavaScript usando algum tipo de biblioteca JavaScript, como jQuery ou YUI, e colocar seu código em um arquivo .js externo.

Mas se você deseja uma solução rápida e suja, esta é sua solução HTML embutida:

<input type="text" id="textbox" value="Search"
    onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}" 
    onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />

Atualizado : Adicionado o material de coloração solicitado.

Eu publiquei uma solução para isso no meu site há algum tempo. Para usá-lo, importe um único .jsarquivo:

<script type="text/javascript" src="/hint-textbox.js"></script>

Em seguida, anote as entradas que você deseja obter dicas com a classe CSS hintTextbox:

<input type="text" name="email" value="enter email" class="hintTextbox" />

Mais informações e exemplos estão disponíveis aqui .

Aqui está um exemplo funcional com o cache da biblioteca do Google Ajax e alguma mágica do jQuery.

Este seria o CSS:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

Este seria o código JavaScript:

<script language="javascript"
        type="text/javascript"
        src="http://www.google.com/jsapi">
</script>
<script>
    // Load jQuery
    google.load("jquery", "1");

    google.setOnLoadCallback(function() {
        $("#search_form")
            .submit(function() {
                alert("Submitted. Value= " + $("input:first").val());
                return false;
        });

        $("#keywords")
            .focus(function() {
                if ($(this).val() == 'Search') {
                    $(this)
                    .removeClass('inputblank')
                    .val('');
                }
            })
            .blur(function() {
                if ($(this).val() == '') {
                    $(this)
                    .addClass('inputblank')
                    .val('Search');
                }
            });
    });
</script>

E este seria o HTML:

<form id="search_form">
    <fieldset>
        <legend>Search the site</legend>
            <label for="keywords">Keywords:</label>
        <input id="keywords" type="text" class="inputblank" value="Search"/>
    </fieldset>
</form>

Espero que seja o suficiente para fazer você se interessar pelos GAJAXLibs e pelo jQuery.

Agora ficou muito fácil. Em html, podemos atribuir o atributo placeholder para elementos de entrada .

por exemplo

<input type="text" name="fst_name" placeholder="First Name"/>

verifique para obter mais detalhes: http://www.w3schools.com/tags/att_input_placeholder.asp

Para usuários do jQuery: o link do jQuery do naspinski parece quebrado, mas tente este: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

Você recebe um tutorial gratuito sobre o plugin jQuery como um bônus. :)

Eu achei o plugin jQuery jQuery Watermark melhor do que o listado na resposta superior. Por que melhor? Porque suporta campos de entrada de senha. Além disso, definir a cor da marca d'água (ou outros atributos) é tão fácil quanto criar uma .watermarkreferência no seu arquivo CSS.

Isso é chamado de "marca d'água".

Encontrei o plugin jQuery marca d'água jQuery , que, diferentemente da primeira resposta, não requer configuração extra (a resposta original também precisa de uma chamada especial antes do envio do formulário).

Use o Notificador de Formulário jQuery - é um dos plugins jQuery mais populares e não sofre com os bugs de algumas das outras sugestões do jQuery aqui (por exemplo, você pode estilizar livremente a marca d'água, sem se preocupar se ela será salva no base de dados).

O jQuery Watermark usa um único estilo CSS diretamente nos elementos do formulário (notei que as propriedades de tamanho de fonte CSS aplicadas à marca d'água também afetavam as caixas de texto - não o que eu queria). A vantagem do jQuery Watermark é que você pode arrastar e soltar texto nos campos (o jQuery Form Notifier não permite isso).

Outra sugestão sugerida por outras pessoas (a digitalbrush.com) enviará acidentalmente o valor da marca d'água para o seu formulário, por isso recomendo vivamente.

Use uma imagem de plano de fundo para renderizar o texto:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

Então tudo que você precisa fazer é detectar value == 0e aplicar a classe correta:

 <input class="foo fooempty" value="" type="text" name="bar" />

E o código JavaScript do jQuery se parece com o seguinte:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

Você pode facilmente ler a caixa "Pesquisar" e, quando o foco for alterado, o texto será removido. Algo assim:

<input onfocus="this.value=''" type="text" value="Search" />

Obviamente, se você fizer isso, o próprio texto do usuário desaparecerá quando ele clicar. Então você provavelmente deseja usar algo mais robusto:

<input name="keyword_" type="text" size="25"  style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">

Quando a página é carregada pela primeira vez, faça com que a Pesquisa apareça na caixa de texto, colorida em cinza, se você desejar.

Quando a caixa de entrada receber foco, selecione todo o texto na caixa de pesquisa para que o usuário possa começar a digitar, o que excluirá o texto selecionado no processo. Isso também funcionará bem se o usuário desejar usar a caixa de pesquisa uma segunda vez, pois não precisará destacar manualmente o texto anterior para excluí-lo.

<input type="text" value="Search" onfocus="this.select();" />

Gosto da solução do "Knowledge Chikuse" - simples e clara. Só é necessário adicionar uma chamada para desfocar quando o carregamento da página estiver pronto, o que definirá o estado inicial:

$('input[value="text"]').blur();

Você deseja atribuir algo assim ao onfocus:

if (this.value == this.defaultValue)
    this.value = ''
this.className = ''

e isso para onblur:

if (this.value == '')
    this.value = this.defaultValue
this.className = 'placeholder'

(Você pode usar algo um pouco mais inteligente, como uma função de estrutura, para alternar o nome da classe, se desejar.)

Com alguns CSS como este:

input.placeholder{
    color: gray;
    font-style: italic;
}

Estou usando uma solução javascript simples de uma linha que funciona muito bem. Aqui está um exemplo para a caixa de texto e para a área de texto:

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

a única "desvantagem" é validar em $ _POST ou na validação Javascript antes de fazer qualquer coisa com o valor do campo. Ou seja, verificar se o valor do campo não é "Texto".

$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

A tag simples 'exigida' em HTML é útil.

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

Especifica que um campo de entrada deve ser preenchido antes de enviar o formulário ou pressione o botão enviar. Aqui está um exemplo

Usuário AJAXToolkit de http://asp.net