11

Preciso esconder/remover o value do meu input, mas não estou conseguindo de forma alguma, onde estou errando? Muito Obrigado

HTML:

<div class="caixa-pesquisa">
   <div class="caixa-pesquisa-input">
      <input type="text" class="pesquisa-class" value="Digite o produto desejado...">   
         <div class="caixa-pesquisa-btn"><a class="btn-buscar" href="#">buscar</a></div>
   </div>
</div>

JS:

<script type="text/javascript" >
$(document).ready(function (){
$('.pesquisa-class').click(function(){if(this.value == this.defaultValue) {this.value = ;}});
$('.pesquisa-class').blur(function(){if (this.value == ) {this.value = this.defaultValue;}});
});
</script>
10
  • 2
    Não é mais fácil usar um campo do tipo password? Commented 14/02/2014 às 18:30
  • Mas assim ele criptografa meu texto, não?
    – CRAJ
    Commented 14/02/2014 às 18:32
  • Não, o valor vai em texto plano para quem receber os valores. Se vocẽ quisesse que os valores chegassem criptografados o ideal seria usar SSL/TSL, mas aí é um aspecto da conexão HTTP (HTTPS, no caso) e não tem mais a ver com a aplicação. Commented 14/02/2014 às 18:34
  • 2
    Agora que o @ErlonCharles comentou do placeholder, a pergunta faz sentido. É só setar o atributo placeholder no campo de busca com o valor que você quer que apareça inicialmente :) Commented 14/02/2014 às 18:41
  • 1
    @CRAJ observe as respostas da pergunta e marque uma como correta, isso da reputação para quem à respondeu e independente de pra quem você marque isso também ajuda a comunidade a crescer :D Commented 14/02/2014 às 18:56

7 Respostas 7

9

Resposta:

Não precisa de nada do que você está fazendo, você pode apenas utilizar o atributo placeholder do <input> desta maneira:

<input type="text" class="pesquisa-class" placeholder="Digite o produto desejado..." value="">

Explicação:

Utilizar pra fazer o que você precisa, não seria necessário pois os <input>'s do contém alguns atributos que facilitam muitas coisas, dentre eles o placeholder seria o atributo mais indicado para o que você quer fazer.

O placeholder é a maneira mais moderna de informar o usuário o que ele tem que digitar no tal campo, anteriormente utilizamos Label's que seriam textos acima do campo.

Documentação do placeholder

Compatibilidade:

Testado e funcionando nos seguintes navegadores:

  • Mozilla Firefox (27.0)
  • Google Chrome (32.0)
  • Safari (5.1.7)
  • Opera (12.16)
  • Internet Explorer (IE11,IE10)

Não funciona nos seguintes navegadores:

  • Internet Explorer(IE9,IE8,IE7)

Solução para navegadores não compatíveis:

Utilizando uma função chamada placeholder():

function placeholder(str){
    $('input').css('color','#ccc');
    $('input').val(str);
}

Você deve executa-la uma vez ao carregar sua página:

placeholder("Digite o produto desejado...");

E deve atribuir estes eventos ao seu input, que seria ao clicar nele(click) limpar o valor dele, e ao sair dele(blur) colocar o placeholder novamente.

$('input').on("click", function () {
  var ValorAnterior = $.cookie("ValorAtual") || "";
  $(this).val(ValorAnterior);
});
$('input').on("blur", function () {
  $.cookie("ValorAtual", $(this).val());
  placeholder("Digite o produto desejado...");
});

Porém você tem que incluir o plugin jQuery Cookie (se desejar utilizar outra forma de cookie fica a sua opção).

5
  • Paulo, incrementa com alguma sugestão de fallback pra navegadores sem suporte ao placeholder Commented 14/02/2014 às 19:41
  • Paulo, concorda comigo que assim toda a vez que o usuário sair do input ele vai perder os dados?
    – SparK
    Commented 19/02/2014 às 13:38
  • Referente à solução compatível para os navegadores não compatíveis né ? Entendi, boa sacada @SparK ! vou mudar isto já :P Commented 19/02/2014 às 13:44
  • de uma olhada @SparK Commented 19/02/2014 às 14:31
  • Continua com comportamento diferente do padrão do navegador. gist.github.com/SparK-Cruz/9096590 O uso seria $("input").placeholder();
    – SparK
    Commented 19/02/2014 às 17:11
2

Seu javascript tem 2 erros, arrumando fica assim:

<script>
   $(document).ready(function (){
      $('.pesquisa-class').click(function(){if(this.value == this.defaultValue) {this.value = '';}});
      $('.pesquisa-class').blur(function(){if (this.value == '') {this.value = this.defaultValue;}});
  });
</script>

No .blur seu if estava apenas if (this.value == ) sem o outro valor. No .click estava this.value = ; sem um valor para definir.

Código no JSFiddle

2

Use o atributo placeholder no input.
Esse atributo só mostra o texto que você escolher enquanto o value do input estiver vazio.
Exemplo:

<div class="caixa-pesquisa">
   <div class="caixa-pesquisa-input">
      <input type="text" class="pesquisa-class" placeholder="Digite o produto desejado..." value="">   
         <div class="caixa-pesquisa-btn"><a class="btn-buscar" href="#">buscar</a></div>
   </div>
</div>
2

o que voce procura é um placeholder, neste caso, caso sua página suporte HTML 5, voce só precisa colocar "Digite o produto desejado..." em um atributo placeholder, o unico porém é que nem todos os navegadores suportam completamente o placeholder(IE), então tem a alternativa em javascript ou plugins do jquery , eu procurei no site em inglês, pois sei que vi uma questão parecida recentemente, mas não encontrei nada.

1

Já que você está usando jQuery pode escrever o código desta maneira:

$(document).ready(function () {
    // armazena valor
    $('.pesquisa-class').get(0).defaultValue = $('.pesquisa-class').val();
    // limpa valor
    $('.pesquisa-class').click(function(){
        if($(this).val() == this.defaultValue) $(this).val('');
    });
    // recupera valor
    $('.pesquisa-class').blur(function(){
        if($(this).val() == '') $(this).val(this.defaultValue);
    });
});

Você tem que armazenar seu valor padrão pra poder comparar.

Para testar use o JSFiddle.

Em browsers modernos o tag input suporta a propriedade placeholder que serve exatamente pra isso que está sendo feito via javascript.

2
  • não funcionou amigo..
    – CRAJ
    Commented 14/02/2014 às 18:36
  • @CRAJ Coloquei um fiddle pra vc poder ver funcionando. Commented 14/02/2014 às 18:51
1

A ideia é deixar um texto padrão para instrução do usuário e/ou label do campo a ser preenchido. Como dito nas outras respostas, este recurso está disponível em todos os navegadores modernos através do atributo placeholder:

<input type="text" value="" placeholder="teste" />

Para navegadores mais antigos entenderem a atributo placeholder é necessária a utilização de um plugin (pode usar à vontade). O mesmo só é ativado quando detecta que o navegador não suporta placeholders nativamente.

-2

Use o <input type='password'> é bem melhor.. e quando você for pegar o valor dele ele te retorna como string, entende ? nada criptografado..

assim: http://jsfiddle.net/V4swX/

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .