Previsualización de datos de un formulario «en vivo»
Enviado por miguelcarmona :: 23 de noviembre de 2009
He recibido alguna que otra pregunta sobre qué plugin utilizo para la previsualización de los comentarios antes de enviarlos. La respuesta es bien sencilla, ninguno.
Para realizar esta hazaña, utilizamos javascript, mediante el cual, le indicamos que cada vez que se presione una tecla, coja el contenido de lo que estemos escribiendo y lo inserte en el área de previsualización. Algo que parece complejo, pero que no lo es.
Bueno, comencemos:
Necesitamos un formulario (voy a imitar un típico formulario de contacto) y un área de previsualización (la voy a poner justo a la derecha del formulario).
<!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>
</head>
<body>
<div id="contenedor">
<div id="formulario" class="flotando margen-derecho">
<form action="#" enctype="multipart/form-data">
<label for="nombre">Su nombre</label>
<input type="text" name="nombre" id="nombre" />
<label for="email">Su correo electrónico</label>
<input type="text" name="email" id="email" />
<label for="mensaje">Su mensaje</label>
<textarea id="mensaje"></textarea>
</form>
</div>
<div id="previsualizacion" class="flotando">
<fieldset>
<legend>Previsualización de mensaje:</legend>
<p class="titulo">Mensaje de <span id="preview_name" class="negrita">Anónimo</span> (<span id="preview_email"></span>)</p>
<span id="preview_text"></span>
</fieldset>
</div>
</div>
</body>
</html>
Ahora necesitamos crear un script en javascript que coja el contenido de cada campo y lo inserte en la previsualización. Para ello vamos a usar:
- document.getElementById
Esta «función» nos permite «serializar» como objeto una etiqueta html a la cual le hemos puesto un identificador (id).
Podemos aplicar varias acciones a este objeto como obtener su valor:
document.getElementById('id').value
En nuestro caso vamos a utilizar innerhtml que básicamente sirve para establecer el contenido de dicho objeto (osease, el contenido de esta etiqueta)
Esta función nos permite reemplazar un contenido. Es parecida a la función str_replace() de php salvo que sólo reemplaza la primera coincidencia (salvo que se lo indiquemos).
Así pues, procedamos a realizar el script para la previsualización del texto:
function liveComment_text(texto)
{
texto = texto.replace(/n/gi,'<br />');
document.getElementById('preview_text').innerHTML = texto;
}
Recibimos el texto y lo primero que hacemos es reemplazar todos los saltos de línea (n) por saltos de línea en html. Al indicarle gi estamos diciéndole que reemplace todos los caracteres encontrados (no sólo el primero que encuentre).
Posteriormente, creamos un objeto con el id de etiqueta ‘preview_text’, de forma que insertamos en su interior el texto (ya reemplazado).
Y básicamente eso. No hay más. Esa es toda la ciencia.
Lógicamente ya jugaremos con las funciones que necesitemos, así como con los campos necesarios.
Aquí el código de cómo quedaría completo (puedes pegarlo en un archivo de texto plano y guardarlo con extensión .html para probarlo en tu navegador):
<!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_name(texto)
{
if( texto == '' ) texto = 'Anónimo';
document.getElementById('preview_name').innerHTML = texto;
}
function liveComment_email(texto)
{
document.getElementById('preview_email').innerHTML = texto;
}
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">
<label for="nombre">Su nombre</label>
<input type="text" name="nombre" id="nombre" onkeyup="liveComment_name(this.value)" />
<label for="email">Su correo electrónico</label>
<input type="text" name="email" id="email" onkeyup="liveComment_email(this.value)" />
<label for="mensaje">Su mensaje</label>
<textarea id="mensaje" onkeyup="liveComment_text(this.value)"></textarea>
</form>
</div>
<div id="previsualizacion" class="flotando">
<fieldset>
<legend>Previsualización de mensaje:</legend>
<p class="titulo">Mensaje de <span id="preview_name" class="negrita">Anónimo</span> (<span id="preview_email"></span>)</p>
<span id="preview_text"></span>
</fieldset>
</div>
</div>
</body>
</html>
Y bueno, para ver cómo quedaría, no tenéis más que probar el formulario de comentar más abajo.
Josema dice: 
luiyi 
Mariano 
Mariano 
Juanjo 
Sígueme por RSS
Sígueme en twitter
