Retornar o valor Default ao input com JQuery

E aí galera… tudo joia??
Vou passar hoje uma dica bem util para usabilidade do site.
Geralmente a gente coloca um textinput de busca, com o value=”busca”, aí a gente que quando o cara colocar
o mouse lá pra digitar algo esse valor saia de lá …e se ele sair do campo sem digitar nada o value=”busca” volte.
Isso é uma mágica muito simples de se fazer com jQuery :

 
        //Input id="input-busca"
        $busca = $('#input-busca');
	$busca.blur(function(){
		if( $busca.val() == ''){
			$busca.val('Pesquisar');
		}
	});
	$busca.focus(function(){
		if( $busca.val() == 'Pesquisar'){
			$busca.val('');
		}
	});

muito simples né … mas quem tiver dúvidas pergunte nos comentários.

Update:
Com javascript puro, tambem é facil de fazer.
Por exemplo um input “Pesquisar”, basta você colocar diretamente no input os atributos onBlur e on Focus:

onFocus="javascript: if( this.value == 'Pesquisar' ){ this.value = '' } " onBlur="javascript: if( this.value == ''){ this.value= 'Pesquisar'}"
  • http://dsprog.com Daniel

    Opa valeu tava buscando por isso já usei algumas vezes mas nunca lembro de fazer uma função para isso e deixar guardada

  • http://www.facebook.com/mateusbatatais Mateus Batatais

    cara.. tenho uma duvida : eu quero fazer isso para todos os inputs da pagina.. somente com uma funcao. por exemplo, tenho input com o nome… com o emaill.. todos ja com o value atribuidos… entao criei a funcao:

    $(function(){

    $(‘:input’).focus(function(){
    $(this).attr(‘value’,”) //pega o campo input e no valor, coloca vazio
    })
    $(‘:input’).blur(function(){
    var valor = $(this).attr(‘value’); //cria a variavel que pega o campo do input.. mas nesse ponto ja est’a vazia… e se coloco fora dessas funcoes, da erro.
    $(this).attr(‘value’,valor) //aplica a variavel aqui

    })
    })

    o problema eh que na variavel VALOR que atribui o value do input, ja nao esta com o valor de antes mais.. entao quando mando devolver nessa linha: $(this).attr(‘value’,valor) =, ele recebe vazio… tem alguma dica?

  • Anônimo

    Então..
    Você tá esquecendo de pegar o valor no ‘focus()’.
    Ficaria assim (melhorado):

    var valor;

    $(‘:input’).focus(function() {
    valor = $(this).val();
    $(this).val(”);
    }).blur(function() {
    if ($(this).val() != ” && $(this).val() != valor) {
    return false;
    }

    $(this).val(valor);
    });