seja bem vindo ao forum eof, caso nao seja cadastrado se cadastre para poder visualizar todo o conteudo ^^

Participe do fórum, é rápido e fácil

seja bem vindo ao forum eof, caso nao seja cadastrado se cadastre para poder visualizar todo o conteudo ^^
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Você não está conectado. Conecte-se ou registre-se

 » Programação Web » Javascript / Jquery / Ajax » [tutorial] input text com value dinamico

[tutorial] input text com value dinamico

Ir para baixo  Mensagem [Página 1 de 1]

1[tutorial] input text com value dinamico Empty [tutorial] input text com value dinamico Qui Nov 07, 2013 10:14 pm

Kodo no Kami

Kodo no Kami
master
master

bom galera nesse tutorial vou ensinar como criar input text com texto de referencia dentro e quando clicar nele vai apagar o texto dentro, para começar criamos uma pagina basica

Código:
<html>
<head>
   <script type="text/javascript">
   </script>
</head>
<body>
</body>
</html>
agora criamos duas funções que vai escrever o texto quando a pessoa nao estiver clicando no input e a outra vai apagar o texto caso ela clique no input (o texto so sera apagado se for o de referencia), tambem vou criar um input text e vou colocar um value nele e um id para manipular

Código:
<html>
<head>
   <script type="text/javascript">
      function fts_apagar()
      {
      }
     
      function fts_escrever()
      {
      }
   </script>
</head>
<body>
    <input type="text" value="digite seu nome" id="nome">
</body>
</html>
agora eu uso o evento onclick passo a funçao que vai apagar

Código:
<html>
<head>
   <script type="text/javascript">
      function fts_apagar()
      {
      }
     
      function fts_escrever()
      {
      }
   </script>
</head>
<body>
    <input type="text" value="digite seu nome" id="nome" onclick="fts_apagar()">
</body>
</html>
dentro da função que vai apagar usamos o document.getElementById e o atributo value dele para localizar o input depois usamos um condição if e comparamos com o texto que colocamos no value do input isso serve para evitar apagar outro texto q colocarmos ali, dentro do escopo do if usamos de novo o getElementById e atribuimos uma string vazia para ele

Código:
<html>
<head>
   <script type="text/javascript">
      function fts_apagar()
      {
        if(document.getElementById("nome").value == "digite seu nome")
        {
         document.getElementById("nome").value = "";
        }
      }
     
      function fts_escrever()
      {
      }
   </script>
</head>
<body>
    <input type="text" value="digite seu nome" id="nome" onclick="fts_apagar()">
</body>
</html>
agora usamos o evento onblur e passamos como argumento a outra função

Código:
<html>
<head>
   <script type="text/javascript">
      function fts_apagar()
      {
        if(document.getElementById("nome").value == "digite seu nome")
        {
         document.getElementById("nome").value = "";
        }
      }
     
      function fts_escrever()
      {
      }
   </script>
</head>
<body>
    <input type="text" value="digite seu nome" id="nome" onclick="fts_apagar()" onblur="fts_escrever()">
</body>
</html>
dentro da função fazemos a mesma coisa usamos a função document.getElementById e o atributo value para comparar so que dessa vez comparamos com vazio, depois atribuimos o mesmo value de referencia

Código:
<html>
<head>
   <script type="text/javascript">
      function fts_apagar()
      {
        if(document.getElementById("nome").value == "digite seu nome")
        {
         document.getElementById("nome").value = "";
        }
      }
     
      function fts_escrever()
      {
        if(document.getElementById("nome").value == "")
        {
         document.getElementById("nome").value = "digite seu nome";
        }
      }
   </script>
</head>
<body>
    <input type="text" value="digite seu nome" id="nome" onclick="fts_apagar()" onblur="fts_escrever()">
</body>
</html>
no meu caso o input vai começar com a mesagem "digite seu nome" quando eu clicar o texto sera apago, caso eu nao digite nada e tira o mouse de cima vai voltar o texto "digite seu nome", para ver um exemplo online segue o link abaixo

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

by hfts315

https://endoffile.umforum.net

Ir para o topo  Mensagem [Página 1 de 1]

 » Programação Web » Javascript / Jquery / Ajax » [tutorial] input text com value dinamico

Permissões neste sub-fórum
Não podes responder a tópicos