Previsualización de comentarios con JavaScript

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