[tutorial] input text com value dinamico

Postagem de conteúdo sobre programação javascript
Post Reply
User avatar
Kodo no Kami
Admin
Admin
Posts: 739
Joined: Fri Jan 02, 2015 1:56 pm
Contact:

[tutorial] input text com value dinamico

Post by Kodo no Kami » Sun May 03, 2015 9:19 am

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

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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

exemplo online

by kodo no kami
Image

que desagradavel ~ mirai kuriyama

Post Reply

Return to “Javascript”