Mostrar 'fantasma' exemplo de texto em um campo, e depois limpá-la onblur

Question

Estou tentando duplicar o efeito usado na caixa de pesquisa do Firefox em que, se o campo de pesquisa não tem o foco (o usuário não tenha clicado dentro dele), ele apenas diz Google em texto cinza. Então, quando o usuário clica na caixa, o texto é removido e eles podem preencher o seu termo de pesquisa.

Eu quero usar isso para fornecer dados exemplo de campo para um formulário web.

JQuery sintaxe seria preferível javascript simples, mas JS simples seria bom também.

Graças SO Hive mente!

Answer 1

<style type='text/css'>
      input #ghost { color: #CCC; }
      input #normal { color: #OOO; }
</style>

<script type='text/javascript'> 
    function addTextHint(elem, hintText)
    {       
        if (elem.value == '')   
        {       
            elem.value = hintText;
            elem.style.className = 'ghost';
        }

        elem.onfocus = function ()
        {           
            if (elem.value == hintText)         
            {
                elem.value = '';
                elem.className = 'normal';
            }
        }

        elem.onblur = function ()
        {
            if (elem.value == '')
            {
                elem.value = hintText;
                elem.className = 'ghost';
            }
        }           
    }

    addTextHint(document.getElementById('foobar'),'Google');
</script>

Apenas chicoteado isso para você. jQuery iria torná-lo menor tenho certeza, mas eu não usá-lo.

Answer 2

Esta técnica é tão comumente usado que é agora explicitamente apoiada na especificação HTML através do atributo de espaço reservado da marca de entrada:
HTML espaço reservado Atributo

Já está suportado na maioria dos navegadores e para os mais velhos há um plugin jQuery fornecendo implementação calço que lata ser encontrada aqui .

Para denominar o texto espaço reservado, consulte este (exemplos vivos incluído):
HTML5 Placeholder Styling com CSS

Answer 3

Outra maneira é usar algum CSS, criar uma imagem com o texto fundo você quer, e defina-o como a imagem da caixa de texto de fundo, em seguida, quando o foco da caixa de texto do get você pode mudar estilos de remover essa imagem de fundo.

Answer 4

JQuery Implementação

<input type="text" id = "textField" value="Google" class="RegularText GhostText" />

<style>
.GhostText{color:#DDD}
.RegularText{color:#CCC}
</style>

<script type="text/javascript" language="javascript">
$("#textField").blur(function(e){
    if ($.trim(e.target.value) == "") {
        e.target.value = e.target.defaultValue;
        e.target.toggleClass("GhostText");
    }
});
$("#textField").focus(function(e){
    if ($.trim(e.target.value) == e.target.defaultValue) {
        e.target.value = "";
        e.target.toggleClass("GhostText");
    }
});
</script>

Answer 5

Por que rolar o seu próprio? Use este plugin .

Answer 6

  $(selector).text('Google'); 
  $(selector).click(function(){
    $(this).text('');
  });

Há provavelmente uma maneira mais elegante de fazer isso, mas isso pressupõe sua caixa não tem nenhum texto nela no carregamento da página. Se isso acontecer, você pode remover a primeira linha.

Eu não testei isso, mas ele deve funcionar.