Skip to main content
adicionei uma maneira de salvar o valor que estava antes no input pra colocar devolta ao voltar pro input
Fonte Link
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75

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

#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 () {
  $(this).val('');
});
$('input').on("blur", function () {
    placeholder("Digite o produto desejado...");
});

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

dei update no fiddle
Fonte Link
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75

#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íveisSolução para navegadores não compatíveis:

Utilizando uma função chamada placeholder():

function placeholder(str){
    $('input').css('color','#ccc');
    $('input').val('teste'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 () {
  $(this).val('');
});
$('input').on("blur", function () {
  $(this).val();
    placeholder("Digite o produto desejado...");
});

#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:

function placeholder(){
    $('input').css('color','#ccc');
    $('input').val('teste');
}
placeholder();
$('input').on("click", function () {
  $(this).val('');
});
$('input').on("blur", function () {
  $(this).val();
    placeholder();
});

#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 () {
  $(this).val('');
});
$('input').on("blur", function () {
    placeholder("Digite o produto desejado...");
});
added 394 characters in body
Fonte Link
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75

#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:

function placeholder(){
    $('input').css('color','#ccc');
    $('input').val('teste');
}
placeholder();
$('input').on("click", function () {
  $(this).val('');
});
$('input').on("blur", function () {
  $(this).val();
    placeholder();
});

#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)

#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:

function placeholder(){
    $('input').css('color','#ccc');
    $('input').val('teste');
}
placeholder();
$('input').on("click", function () {
  $(this).val('');
});
$('input').on("blur", function () {
  $(this).val();
    placeholder();
});
adicionei informação sobre compatibilidade
Fonte Link
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75
Carregando
added 588 characters in body
Fonte Link
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75
Carregando
Fonte Link
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75
Carregando