Ir para conteúdo
Fórum Script Brasil
  • 0

Placeholder jQuery


GuuH.zin

Pergunta

Olá

Tenho esse codigo em jQuery para simular um placeholder nos campos "input" do tipo text:

Nome: jquery.placeholder.js

$(document).ready(function(){
  $("input[placeholder]").each(function(el){
    if($(this).val()==""){
      $(this).val($(this).attr("placeholder")).addClass("placeholder");
    }
    $(this).focus(function(){
      if($(this).val()==$(this).attr("placeholder")){
        $(this).removeClass("placeholder").val("");   
      }
    });
    $(this).blur(function(){
      if($(this).val()==""){
        $(this).addClass("placeholder").val($(this).attr("placeholder"));
      }
    });            
  });
  
  $("form").submit(function(){
    $("input[placeholder]").each(function(n,element){
      if($(element).val()==$(element).attr("placeholder")){
        return false; 
      }
    });
  });
});
Como vocês podem ver no codigo acima, se o valor do campo for igual ao valor do atributo placeholder ao enviar o formulário, o placeholder do campo some, isso para ter um controle e garantir form não irá enviar o valor do placeholder se o usuário não escrever nada no campo. Supondo que eu tenha dois formulários na página, exemplo:
<html>
  <head>
    <script src="jquery.placeholder.js" type=""> </script>
  </head>
  <body>
    <form action="destino1.htm" method="get">
      <input type="text" name="1" placeholder="Digite o o valor campo do formulário 1 aqui."  value="" />
      <input type="submit" value="Enviar" />
    </form>
    <form action="destino2.htm" method="post">
      <input type="text" name="2" placeholder="Digite o o valor campo do formulário 2 aqui."  value="" />
      <input type="submit" value="Enviar" />
    </form>
  </body>
</html>

Se eu clicar no Submit do formulário 1 ou do 2, sem escrever nadas nos campos, os placeholders dos dois formulários vão sair, quando deveria sair apenas o do formulário que foi enviado.

Isso tsmbém acontece se eu escrever no formulário 1, enviá-lo e deixar o 2 em branco - o placeholder do 2 irá sair, quando ele deveria ficar, já que eu enviei o form 1.

Já tentei de tudo para resolver, olhei na internet sobre a função each do jQuery e achei algo parecido com o que eu estou tentando fazer, mas não deu certo, continua igual.

Agradeço desde já.

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0
Olá

Tenho esse codigo em jQuery para simular um placeholder nos campos "input" do tipo text:

Nome: jquery.placeholder.js

$(document).ready(function(){
  $("input[placeholder]").each(function(el){
    if($(this).val()==""){
      $(this).val($(this).attr("placeholder")).addClass("placeholder");
    }
    $(this).focus(function(){
      if($(this).val()==$(this).attr("placeholder")){
        $(this).removeClass("placeholder").val("");   
      }
    });
    $(this).blur(function(){
      if($(this).val()==""){
        $(this).addClass("placeholder").val($(this).attr("placeholder"));
      }
    });            
  });
  
  $("form").submit(function(){
    $("input[placeholder]").each(function(n,element){
      if($(element).val()==$(element).attr("placeholder")){
        return false; 
      }
    });
  });
});
Como vocês podem ver no codigo acima, se o valor do campo for igual ao valor do atributo placeholder ao enviar o formulário, o placeholder do campo some, isso para ter um controle e garantir form não irá enviar o valor do placeholder se o usuário não escrever nada no campo. Supondo que eu tenha dois formulários na página, exemplo:
<html>
  <head>
    &lt;script src="jquery.placeholder.js" type=""> </script>
  </head>
  <body>
    <form action="destino1.htm" method="get">
      <input type="text" name="1" placeholder="Digite o o valor campo do formulário 1 aqui."  value="" />
      <input type="submit" value="Enviar" />
    </form>
    <form action="destino2.htm" method="post">
      <input type="text" name="2" placeholder="Digite o o valor campo do formulário 2 aqui."  value="" />
      <input type="submit" value="Enviar" />
    </form>
  </body>
</html>
Se eu clicar no Submit do formulário 1 ou do 2, sem escrever nadas nos campos, os placeholders dos dois formulários vão sair, quando deveria sair apenas o do formulário que foi enviado. Isso tsmbém acontece se eu escrever no formulário 1, enviá-lo e deixar o 2 em branco - o placeholder do 2 irá sair, quando ele deveria ficar, já que eu enviei o form 1. Já tentei de tudo para resolver, olhei na internet sobre a função each do jQuery e achei algo parecido com o que eu estou tentando fazer, mas não deu certo, continua igual. Agradeço desde já.
Bom dia. Meu caro tive o mesmo problema que você, e resolvi da seguinte forma: O formulário coloquei um id para identificar qual esta passando a informação:
<html>
  <head>
    &lt;script src="jquery.placeholder.js" type=""> </script>
  </head>
  <body>
    <form action="destino1.htm" [color="#FF0000"]id="form1"[/color] method="get">
      <input type="text" name="1" placeholder="Digite o o valor campo do formulário 1 aqui."  value="" />
      <input type="submit" value="Enviar" />
    </form>
    <form action="destino2.htm" [color="#FF0000"]id="form2"[/color] method="post">
      <input type="text" name="2" placeholder="Digite o o valor campo do formulário 2 aqui."  value="" />
      <input type="submit" value="Enviar" />
    </form>
  </body>
</html>
no js fiz a seguinte modificação:]
$(document).ready(function(){
  $("input[placeholder]").each(function(el){
    if($(this).val()==""){
      $(this).val($(this).attr("placeholder")).addClass("placeholder");
    }
    $(this).focus(function(){
      if($(this).val()==$(this).attr("placeholder")){
        $(this).removeClass("placeholder").val("");   
      }
    });
    $(this).blur(function(){
      if($(this).val()==""){
        $(this).addClass("placeholder").val($(this).attr("placeholder"));
      }
    });            
  });
  
  $("form").submit(function(){
    [color="#FF0000"]$("#"+$(this).attr('id')+" input[placeholder]").each(function(n,element){[/color]
      if($(element).val()==$(element).attr("placeholder")){
        [color="#FF0000"]$(element).val("");[/color]
      }
    });
  });
});

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...