Previsualización de datos de un formulario “en vivo”
Enviado por Miguel Carmona :: 23 de Noviembre de 2009
previsualización de comentario en "vivo"
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 algunas funciones de javascript:
- 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)
- replace
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 el código final
<!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> |
Os dejo la vista previa del ejemplo: http://miguelcarmona.name/scripts_propios/previsualizacion-de-formulario-en-vivo/
Anónimo 
Todas las entradas
Con ajax incluso se podría validar los campos como el correo electrónico o la longitud antes de que el usuario envíe el forumlario de contacto.
Saludos.