Previsualización de comentarios con JavaScript

admin20 Noviembre 2005 - 8:10pm 13 comentarios
Enviar por Email Imprimir

La Pevisualización de comentarios esta en auge. Muchos sitios Web lo utilizan como una forma de dar, más que luz al diseño, una comodidad a quien comenta.

En este artículo vemos rápidamente como crear un sistema de previsualización de comentarios en la misma página en que se lo escribe.

El resultado lo puedes observar en: Previsualizar comentarios con JavaScript.

¿Por qué es importante Previsualizar los comentarios?

La comodidad de quien escribe es una de la ventajas, tal ves la principal. El usuario se siente seguro que lo que escribe se verá correcto y no cometerá algún error que le provoque posteriores vergüenzas.

Asimismo es una comodidad para quien modera, pues se le aminora la carga de corregir los errores u horrores ortográficos que devalúan el contenido de un Web Site.

Pero además, el diseñó moderno de este sistema es una gran ventaja. Como pocos sitios webs lo han implementado, constituye un atractivo adicional.

El Html.- Creación del formulario

La creación del formulario es algo simple y no merece mayor comentario. Sin embargo, debes tener presente que no puedes modificar el id o name de ningún elemento sin antes haberlo hecho en el javascript. La discordancia entre ambos hace infuncional el sistema.

Para facilitar la comprensión del código, es importante que mencione lo siguiente:

  • El div comments es el que engloba los elementos que mostrarán los datos del autor, fecha y texto del comentario.
  • Dentro del div previewAutor se mostrará el Nombre del Autor.

Este es el código html (No te molestes en copiarlo, al final del artículo puedes descargarte el código fuente de ejemplo):

<div id="comments">
<div id="previewAutor">
</div>
</div>
<fieldset>
<legend>Publica tu comentario</legend>
<form method="post" action="#" name="baluform" id="baluform">
<input id="author_com" name="author_com" type="text" class="inputtext" />
<input id="email_com" name="email_com" type="text" class="inputtext" />
<input id="url_com" name="url_com" type="text" class="inputtext" />
<textarea id="text_com" name="text_com"></textarea>
<input id="btn_previsualizar" type="submit" name="Previsualizar" value="Previsualizar" class="inputbutton" />
</form>
</fieldset>

Estas son algunas cosas que debes añadir a tu formulario:

  • El Action del formulario, el cual ejecuta la inserción de los datos a la BD.
  • El campo oculto de la fecha, por ejemplo <?php echo date('Y-m-d H:i:s'); ?>
  • El id del artículo al cual estará relacionado.
  • Y por supuesto el botón Publicar.

El JavaScript.- Crea las funcionalidades

El código JavaScript puede incluirse dentro de la misma página Html, pero por razones de estructura y claridad en el código lo he puesto en un archivo distinto, llamado previsualizar.js.

Para llamarlo desde la página Html, debes incluir dentro de las etiquetas head lo siguiente:

<script type="text/javascript" src="js/previsualizar.js"></script>

El Evento Onload

Como el formulario para comentar esta disponible desde que se carga la página del artículo, necesitamos que el código JavaScript este disponible desde un inicio. Esto se realiza escribiendo en la primera línea:

window.onload = window_onload;

Con el evento onload se indica que al momento de cargar la página también se cargue window_onload.

La función window_onload()

Con esta función se asigna valores por defecto a los campos email_com, author_com y url_com.

Por ejemplo, recuperamos el id email_com y le colocamos el valor Correo electrónico.

if(document.getElementById('email_com').value == "")

document.getElementById('email_com').value = "Correo electrónico";

Luego mostramos los valores que hemos asignado de la siguiente manera:

document.getElementById('email_com').onfocus = function()

{
if (this.value == "Correo electrónico"){this.value = "";}
};

De igual forma repetimos los pasos para los otros campos del formulario:

Previsualización del Comentario

Para una mejor comprensión, aquí divido el Script en tres partes:

Primera parte

Creamos el div livepreview, donde mostraremos la fecha:

var nc = document.createElement('div'); // Crea un div

nc.className = 'comment'; // clase CSS

nc.style.display = 'none'; // estilo css

nc.id = 'livepreview'; // id del elemento div

Ahora creamos la fecha, para esto nos valemos de la función Date():

var dt = new Date();

var ms = new

Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio",
"Agosto","Setiembre","Octubre","Noviembre","Diciembre");

var hr = (dt.getHours()==0?12:(dt.getHours()>12?dt.getHours()-12:dt.getHours()));

cpd.innerHTML = dt.getDate() + ' de ' + ms[dt.getMonth()] + ' del ' + dt.getFullYear() + '<br/>' + (hr<10?'0':'') + hr + ':' + (dt.getMinutes()<10?'0':'') + dt.getMinutes() + ' ' + (dt.getHours()<12?'a.m.':'p.m.');

Segunda parte

Creamos el div commenttext, que mostrará el texto del comentario. Lo hacemos de manera similar a la creación de livepreview.

var cmt = document.createElement('div');

cmt.className = 'commenttext'; // Clase CSS

cmt.style.minHeight = '40px'; // Altura mínima del div

cmt.id = 'commenttext'; // id del elemento div

Luego, definimos que después de pulsar el boton Previsualizar se muestre la vista previa del comentario. Para esto usamos el evento onclik:

bp.onclick=function()

{

var el = document.getElementById('livepreview');

el.style.display = 'block';

window.scroll(0, 99999);

document.getElementById("commenttext").style.backgroundColor = "transparent";

return false;

}

Asimismo, indicamos que cada vez que realicemos un salto de línea en el campo de texto del formulario, se lo reemplace a con la etiqueta <br />.

txt.onkeyup=function()

{

var lp = document.getElementById("commenttext");

lp.innerHTML = '<p>' + this.value.replace(/\n/g, "<br />") + '</p>';

}

Tercera Parte

Y finalmente creamos la funcion setPreviewMetaData() para mostrar el nombre del Autor como un link a la Url que el mismo escriba.

function setPreviewMetaData()

{

var auth = document.getElementById("author_com");

var url_com = document.getElementById("url_com");

var pre = '', post = '';

if(url_com.value.length > 0 )

{
pre = '<a href="'+url_com.value+'">';

post = '</a>';
}

var lp = document.getElementById("previewAutor");

lp.innerHTML = pre + auth.value + post;

}

Sobre el Diseño

El diseño lo he hecho con código CSS, todo se puede personalizar fácilmente. Asimismo, para modificar el color de fondo del comentario previsualizado (El div commenttext) debemos modificar la línea 114, cambiando el valor “transparent” por el valor del color que mejor se adapte a tu diseño.

Descargar: Código Fuente

Comentarios

Imagen de Javi
Javi

En una palabra: GRANDIOSO. He estado buscando un tutorial que me permita hacer esto por mucho tiempo. Saludos, tu página esta excelente. Sigue así.

Imagen de alfredo
alfredo

ayuda

Imagen de ALFONSO ESCALANTE
ALFONSO ESCALANTE

hola, necesito ayuda, como puedo hacer para encorparar el formulario de comnetarios o sugenrencias en una pagina de web programada en JS y que permita ver los comentarios en la misma pagina asi como su pagina,,,, puede ayudarme

Imagen de AcDj4FocFI

Hi! Very nice site! Thanks you very much! jR9tdgLlxcnvCm

Imagen de anabel
anabel

Hola!!La previsualizacion de mensajes es muy util.Que padre que lo publicaste, ahora lo podre implementar en mis aplicaciones.Gracias  

Imagen de Anonymous
Anonymous

muy bueno el codigo

Imagen de mami
mami

hola que tal.. el previsualisador es muy bueno.. oye una pregunta como se hace para dejar comentarios.. ejemplo.. ya escribi uno.. y ahora quiero escribir otro diferente y que este debajo del que ya escribi.. ya le intente de muchas formas y no pude.. por fa ayuda!!!

Imagen de deiler
deiler

hola to tambien tengo el mismo problema

en el ejm pongo un comentarrio y sale bien pero cunaod pongo otro comentarrio reemplaza al primero como soluciono esto.

Imagen de sandro
Imagen de mar4mota
mar4mota

no quedan los comentarios en la pagina, help help

Imagen de admin
admin

Asegurate de recuperar las variables e insartar la info en la BD correctamente. Saludos.

Imagen de Daniel 21
Daniel 21

Hola tienes un previsulizador pero que sea de imagenes y que no recarge la pagina?

Dejar comentario

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

Cómo instalar Windows 10 (Technical Preview)
El martes, Microsoft develó el Windows 10, la esperada versión que le sigue al no menos conocido Windows 8 y que entre sus mejoras incluye el retorno del menú de Incio, cambios a la forma en que se muestran sus... más