[Resolvido] Clica no Botão exibe campo de texto

[-=Felipe=- 0]

beleza !!

 

Genti eu queria um botão que quando voce clica nele abri um campo de texto como no site:

 

http://userstyles.org/styles/4594

 

Cliquem no botão "Show Code" em baixo da Imagem para visualizar oke eu kero.

 

Vlw !!

[iRCC 0]

Criar objetos DOM:

 

// --- Cria input de titulo -- //	
	var criaDiv = document.createElement('div');
	var labelTitulo = document.createElement('label');
	labelTitulo.innerHTML = "Titulo :"
	var inputTitulo
	inputTitulo						 = document.createElement('input');
	inputTitulo.type		  = "text";
	inputTitulo.value 		= "";
	inputTitulo.name		  = "titulo";
	inputTitulo.id 			  = "titulo";
	inputTitulo.size				  = "50";
	inputTitulo.maxlength 			= "400";
	inputTitulo.align 				= "right";

	document.body.appendChild(criaDiv);
	criaDiv.appendChild(labelTitulo);
	criaDiv.appendChild(inputTitulo);

crie uma função com este código.

[-=Felipe=- 0]

Manu não funciono aki =/

[iRCC 0]

da algum erro?

 

acabei de fazer um teste com essa:

 

function cria() {
		var div1
		var labelTitulo
		var titulo
		div1 = document.createElement('div');
		labelTitulo = document.createElement('label');
		labelTitulo.innerHTML = "Titulo";
		titulo = document.createElement('input');
		titulo.type = "text";
		titulo.size = "50";
		titulo.value = "";
		titulo.name = "titulo";
		titulo.id = "titulo";
		titulo.maxLenght = "400";

		document.body.appendChild(div1); //coloca a div1 no  body
		div1.appendChild(labelTitulo); //coloca a label dentro da div
		div1.appendChild(titulo); //coloca o input text dentro da div
	
	}

fiz um botao tbm e quando clico nele ele chama a função cria() ali em cima, funcionou perfeitamente.

da uma olhada novamente em seu codigo

[-=Felipe=- 0]

Aeww !!

 

Deu Certo Vlw !!

 

Mais tem como tipo clica no botão e em vez de abrir outro campo de texto fecha o que ja esta aberto ?

 

E Tambem teria como colocar

 

<textarea name="titulo" id="titulo" cols="25" rows="2" readonly="readonly">Test...</textarea>

Em vez de

 

var titulo
		div1 = document.createElement('div');
		titulo = document.createElement('input');
		titulo.type = "text";
		titulo.size = "50";
		titulo.value = "Test...";
		titulo.name = "titulo";
		titulo.id = "titulo";
		titulo.maxLenght = "400";

Vlw !!

[iRCC 0]

Deu certo com a solução ali de cima? posta o código ai e quem sabe se já tiver o site no ar posta o link dele.

[iRCC 0]

Para criar a área de texto segue o mesmo padrão do input.

 

function cria(){
var areaTexto
	var div4
	var labeltext
	
	div4 = document.createElement('div');
	labeltext = document.createElement('label');
	labeltext.innerHTML = "Descricao";
	
	
	areaTexto = document.createElement('textarea')
	areaTexto.name = "areaTexto";
	areaTexto.id = "areaTexto";
	areaTexto.rows = "15";
	areaTexto.cols = "60";
	
	document.body.appendChild(div4);
	div4.appendChild(labeltext);
	div4.appendChild(areaTexto);
}

não entedi a parte de retirar o que já esta la, você diz tipo apagar o campo?

[-=Felipe=- 0]

É apagar o campo por exemplo:

 

Aki ta o botao

eu clico no botao e aparece o campo escrito kalker coisa.

ai eu clico no botao di novo e o campo que apareceu ai em cima some

 

deu pra entender ?

[iRCC 0]

você pode usar

 

removeChild(elemento);

ou tbm deixar o campo com o

 

style="none;"

 

de uma procurada aqui no forum que você vai achas alguns exemplos de remoção

[augustoclaro 2]

você quer que seja só um campo? tipo você clika em um botao e ele aparece ai você clika de novo e ele desaparece, é isso?

[iRCC 0]

A felipe eu aqui achando que você queria relamente criar um campo de txt, se é só aparecer e desaparecer é mtu mais simples, agora que o augustoclaro falou é que fui me tocar.

 

Você pode fazer assim

 

no seu botão chame uma função ex:

 

<input type="button" value="clica" onclick="mostra()" />
<!--Codigo AreadeTexto -->
<textarea rows="20" cols="20" id="areadetexto" style="display:none">CONTEÚDO</textarea>

função javaScript

function mostra() {

	if (document.getElementById('areadetexto').style.display == "") {
		document.getElementById('areadetexto').style.display = "none";

	} else {
	document.getElementById('areadetexto').style.display = "";
	
	}
	

}

 

 

desculpe ter te entendido mal.

[augustoclaro 2]

exato, olhe outro exemplo igual:

 

 

<html>
<head>
<script>
function troca() {
btt = form1.btt1.value
 if (btt == "Mostrar") {
form1.btt1.value = "Ocultar";
document.getElementById("areadetexto").style.visibility="visible";
}else{
form1.btt1.value = "Mostrar";
document.getElementById("areadetexto").style.visibility="hidden";
}
}
</script>
</head>
<body>
<form name="form1">
<textarea rows="20" cols="20" id="areadetexto" style="visibility:hidden;">CONTEÚDO</textarea><br>
<input type="button" name="btt1" value="Mostrar" onclick="troca();">
</form>
</body>
</html>

Espero ter ajudado...

[-=Felipe=- 0]

Aewww vlw augustoclaro e IRCC. É exatamente isso que eu queria !!!

 

Vlw mesmoo !!!

[augustoclaro 2]

de nda!

 

 

agente tah aki pra isso irmão!

 

 

precisando, é so fla, mas me desculpa se eu não responder muito aqui no fórum de JS, pq eu fico mais é lah no fórum de ASP...

 

 

Abraços!