Actualizar div según escriba en un formulario (vista previa)

Kadmon · #1 (**permalink**) 18/02/2013, 15:20

Buenas, a ver si alguien me puede ayudar.

Lo que trato de hacer es que se vaya mostrando en un div una vista previa del texto que voy escribiendo y según lo vaya escribiendo. He buscado por google pero no hay manera, no debo de estar buscando bien.

Gracias por la ayuda

Reedyseth · #2 (**permalink**) 18/02/2013, 17:01

Lo que tienes que hacer es leer la informacion del input con:

Código Javascript:

Ver originalvar texto = document.getElementById("texto").value;

Y luego escribirla en el div:

Código Javascript:

Ver originaldocument.getElementById("idDeMiDiv").innerHtml = texto;

esto reacciona con el evento onKeyPress, onKeyUp u onKeyDown.

Despues de esto cuentanos como te fue.

Kadmon · #3 (**permalink**) 20/02/2013, 04:51

Vale, perfecto, he hecho esto basándome en algunos ejemplos que encontré:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Previsualización de formulario en "vivo"</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			body { margin: 10px; text-align: center; width: 100%; }
			#contenedor { margin: 0 auto; width: 900px; text-align: left; }
			.flotando { float: left; width: 445px;	}
			p{ margin: 2px 0 10px 0; }
			.margen-derecho { margin-right: 10px; }
			input, textarea { width: 99%; margin-bottom: 10px; float: none; clear: both; }
			textarea { height: 300px; }
			label { float: none; clear: both; display: inline; }
			.titulo { font-size: 14pt; }
			.negrita { font-weight: bold; }
		</style>
 
		<script type="text/javascript">
			function liveComment_text(texto)
			{
				texto = texto.replace(/\n/gi,'<br />');
				document.getElementById('preview_text').innerHTML = texto;
			}
		</script>
	</head>
	<body>
		<div id="contenedor">
			<div id="formulario" class="flotando margen-derecho">
			  <form action="#" enctype="multipart/form-data">
			    <textarea id="mensaje" onkeyup="liveComment_text(this.value)"></textarea>
			  </form>
			</div>
			<div id="preview_text" class="flotando">
				
			</div>
		</div>
	</body>
</html>

Gracias

Reedyseth · #4 (**permalink**) 21/02/2013, 09:50

Que bueno que te funciono, muy bien !!