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 :
[js]
//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(”);
}
});
[/js]
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:
[js]
onFocus="javascript: if( this.value == ‘Pesquisar’ ){ this.value = ” } " onBlur="javascript: if( this.value == ”){ this.value= ‘Pesquisar’}"
[/js]
4 Comments
Daniel · 2019-01-22 at 17:37
Opa valeu tava buscando por isso já usei algumas vezes mas nunca lembro de fazer uma função para isso e deixar guardada
Daniel · 2011-06-30 at 12:50
Opa valeu tava buscando por isso já usei algumas vezes mas nunca lembro de fazer uma função para isso e deixar guardada
Mateus Batatais · 2012-02-07 at 10:04
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?
Anonymous · 2012-02-07 at 12:52
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);
});