Como posso fazer uma caixa de texto HTML mostrar uma dica quando vazio?

Question

Eu quero caixa de pesquisa na minha página web para exibir a palavra "Search" em itálico cinza. Quando a caixa recebe o foco, deve olhar apenas como uma caixa de texto vazia. Se já houver texto nele, ele deve exibir o texto normalmente (preto, não itálico). Isso vai me ajudar a evitar a desordem removendo o rótulo.

BTW, esta é uma página on- Ajax procurar, por isso tem nenhum botão.

Answer 1

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

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

Na ausência de todos os estilos, em Chrome Este parece ser:

Você pode tentar demos fora aqui e no HTML5 Placeholder Styling com CSS .

Certifique-se de verificar o compatibilidade do navegador desse recurso . Apoio no Firefox foi adicionado em 3,7. Chrome é bom. Internet Explorer apenas adicionou suporte no 10. Se você segmentar um navegador que faz marcadores de posição de entrada não suporta, você pode usar um plugin jQuery chamado jQuery HTML5 Placeholder , e, em seguida, basta adicionar o seguinte código JavaScript para habilitá-lo.

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

Answer 2

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

• http://naspinski.net/ post / Text-Input-marcas d'água-usando-Javascript- (IE-Compatível) .aspx

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

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

Answer 3

Você pode definir o espaço reservado utilizando o atributo placeholder em HTML ( ). O font-style e color pode ser href="http://css-tricks.com/snippets/css/style-placeholder-text/" mudou com CSS (embora o suporte ao navegador é limitada).

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

Answer 4

Você pode adicionar e remover uma classe CSS especial e modificar o valor de entrada onfocus / onblur com 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 um dica classe com o estilo que você quer em sua CSS por exemplo:

input.hint {
    color: grey;
}

Answer 5

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

Mas se você quer uma solução rápida e suja esta é a sua linha HTML-solução:

<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'}" />

Atualização :. Adicionado a pedido colorindo-stuff

Answer 6

uma solução para isso no meu site há algum tempo. Para usá-lo, importar um único arquivo .js:

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

annotate Então, qualquer entradas que você quer ter sugestões com o hintTextbox classe CSS:

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

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

Answer 7

Aqui está um exemplo funcional com Google Ajax cache de biblioteca e um pouco de magia jQuery.

Este seria o CSS:

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

Isso 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 suficiente para fazer você interessado em ambos os GAJAXLibs e jQuery.

Answer 8

Agora é tornar-se muito fácil. Em html podemos dar o espaço reservado atributo para de entrada elementos.

por exemplo.

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

verificação para mais detalhes: http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 9

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

Você ganha um jQuery plug-in gratuito tutorial como um bônus. :)

Answer 10

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

Answer 11

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

Eu encontrei o plugin jQuery jQuery marca d'água que , ao contrário da primeira resposta, não requer configuração adicional (a resposta original também precisa de uma chamada especial para antes do formulário é enviado).

Answer 12

Use jQuery Form Notifier - é um dos mais populares plugins jQuery e não sofrer com os erros algumas das outras sugestões jQuery aqui fazer (por exemplo, você pode livremente estilo a marca d'água, sem se preocupar se ele vai ser salvo no banco de dados).

jQuery Watermark usa um único estilo CSS diretamente sobre os elementos de formulário (eu notei que as propriedades font-size CSS aplicados para a marca d'água também afetou as caixas de texto - não o que eu queria). A vantagem com jQuery Watermark é que você pode arrastar-soltar texto em campos (não jQuery Form Notifier não permite isso).

Outro sugerido por alguns outros (a um no digitalbrush.com), acidentalmente enviar o valor de marca d'água para sua forma, então eu recomendo fortemente contra ele.

Answer 13

Use uma imagem de fundo para tornar o texto:

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

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

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

e os olhares de código JavaScript jQuery como este:

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

Answer 14

Você poderia facilmente ter uma caixa de ler "Search", em seguida, quando o foco é alterado para ele ter o texto ser removido. Algo parecido com isto:

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

É claro que se você que o próprio texto do usuário desaparecerá quando clicarem. Então você provavelmente vai querer 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">

Answer 15

Quando a página carrega pela primeira vez, tem Pesquisa aparecer na caixa de texto, cor cinza, se você quiser que ele seja.

Quando a caixa de entrada recebe foco, selecione todo o texto na caixa de busca para que o usuário pode simplesmente começar a digitar, o que irá apagar o texto selecionado no processo. Isso também irá funcionar muito bem se o usuário quiser usar a caixa de pesquisa uma segunda vez, uma vez que não terá que se destacar manualmente o texto anterior para excluí-lo.

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

Answer 16

Eu gosto da solução de "Conhecimento Chikuse" - simples e clara. Só precisa adicionar uma chamada a borrar quando o carregamento da página está pronto que irá definir o estado inicial:

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

Answer 17

Você quer algo atribuir como este para onfocus:

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

e isso OnBlur:

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

(Você pode usar algo um pouco mais inteligente, como uma função de enquadramento, para fazer a comutação classname se quiser.)

Com um pouco de CSS como este:

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

Answer 18

$('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">

Answer 19

Simples Html 'necessária' tag é útil.

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

Answer 20

ajaxToolkit usuário de http://asp.net