with - title javascript




Como faço para uma caixa de texto HTML mostrar uma dica quando vazia? (14)

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ê quer uma solução rápida e suja, esta é a sua solução HTML inline:

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

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 parecer com uma caixa de texto vazia. Se já houver texto, ele deverá exibir o texto normalmente (preto, não itálico). Isso me ajudará a evitar a desordem, removendo o rótulo.

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


A tag simples "obrigatória" do Html é útil.

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

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 isso 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 deixar você interessado tanto no GAJAXLibs quanto no jQuery.


Eu encontrei o plugin code.google.com/p/jquery-watermark para ser 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 referência .watermark no seu arquivo CSS.


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

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

Em seguida, anote as entradas que você deseja ter 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 .


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

Eu encontrei o jQuery plugin watermark jQuery que, ao contrário da primeira resposta, não requer configuração extra (a resposta original também precisa de uma chamada especial antes de o formulário ser submetido).



Quando a página é carregada pela primeira vez, a pesquisa aparece na caixa de texto, cinza, se você quiser.

Quando a caixa de entrada recebe 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 quiser usar a caixa de pesquisa uma segunda vez, já que não precisará destacar manualmente o texto anterior para excluí-lo.

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

Use uma imagem de fundo para renderizar o texto:

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

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

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

E o código jQuery JavaScript se parece com isto:

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


Você pode definir o alocador de espaço usando o atributo de placeholder em HTML ( suporte ao navegador ). O font-style e a color podem ser alterados 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ê poderia facilmente ter uma caixa "Pesquisar" e, em seguida, quando o foco é alterado para que o texto seja removido. Algo assim:

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

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

Outra opção, se você estiver satisfeito em 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 here e em estilo HTML5 com CSS .

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

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

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






html5