Editar texto ao clicar

[Andre Summers 0]

Boa tarde pessoal. Alguém poderia me dizer como faz para quando o usuário clicar num texto, apareça um input para que ele possa editá-lo?

 

Desde já agradeço a atenção. ;)

[klonder 14]

A minha primeira intenção foi criar um DIV com um determinado texto, tendo nesse DIV o evento onClick responsável por chamar uma função que substituísse o texto por uma textarea e um botão para confirmação. Entretanto, o DIV continuava com o evendo onClick, ou seja, quando o usuário clicava no texto para editá-lo, a textarea aparecia normalmente, mas assim que o mouse era clicado sobre essa textarea, o evento era disparado e a função era chamada novamente.

 

Bom, para corrigir isso, tive de criar uma textarea para cada bloco de texto (como não poderia deixar de ser, caso a intenção do usuário seja enviar esses textos para um banco de dados, por exemplo). Bastou então apenas manipular o estilo com "display: block/none" que funcionou do jeito que eu queria.

 

Resumindo: matei dois coelhos com uma "caixa d'água" só (caixa d'água é ótimo! kkk :-P). Eu então "se" superei no código e o que eu apenas havia visto em AJAX (eu odeio AJAX), agora consegui fazer com JavaScript puro! O código não é nada demais, mas eu gostei de tê-lo criado pois irei usá-lo a partir de agora nos painéis de controle dos sites que faço!

 

Segue o código:

<script type="text/javascript">
function editarTexto(loc,ct) {
//loc » id do local que será editado;
//ct » 1 ou 0 (ativa/desativa textarea);
var objDIV = document.getElementById("txtDIV"+loc);
var objAREA = document.getElementById("txtAREA"+loc);
var objSPAN = document.getElementById("controle"+loc);
	
	if (ct == 1) {
		var texto = objDIV.innerHTML;
		objDIV.style.display = "none";
		objAREA.value = texto;
		objSPAN.style.display = "block";
		
	}else{
		var texto = objAREA.value;
		objSPAN.style.display = "none";
		objDIV.innerHTML = texto;
		objDIV.style.display = "block";
	}
}
</script>

<div id="txtDIV1" onClick="editarTexto('1',1)" style="display:block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div>
<span id="controle1" style="display:none">
<textarea id="txtAREA1" cols="50" rows="5" wrap="ON"></textarea>
<br><input type="button" onClick="editarTexto('1',0)" value="Editar">
</span>

<br><br>

<div id="txtDIV2" onClick="editarTexto('2',1)" style="display:block">É aconselhável manter uma certa cautela antes de utilizar porções de texto lorem ipsum de origens não confiáveis pois existem muitas versões deste texto em circulação que contêm segmentos propositalmente neles inseridos para causar reações de humor ou mesmo que podem causar constrangimentos a clientes.</div>
<span id="controle2" style="display:none">
<textarea id="txtAREA2" cols="50" rows="5" wrap="ON"></textarea>
<br><input type="button" onClick="editarTexto('2',0)" value="Editar">
</span>