Muchas veces hemos visto como en blogs al escribir nuestro comentario se va creando una vista previa de como va quedando.
Veamos como generar esta vista previa del contenido de una TextArea con JavaScript:
<html>
<head>
<title>Prueba de vista previa</title>
<script type="text/javascript">
<!--
function hacerVistaPrevia()
{
document.getElementById('vistaPrevia').innerHTML = document.getElementById('txtComentario').value.split(/\n/).join("<br />");
}
-->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<textarea id="txtComentario" name="txtComentario" rows="7" cols="40" onkeyup="hacerVistaPrevia()"></textarea>
</form>
<div id="vistaPrevia"></div>
</body>
</html>
2 comentarios ↓
Seria interesante que este formulario apareciera sin bordes en el textarea, de manera que lo podamos integrar dentro de un contenedor editable en el que se muestre transformado todo lo que escribamos con CSS.
Mi proyecto es un editor de placas de noticias como el siguiente:
http://kronicatv.googlepages.com/EditorNoticias8.html
Esta es mi primera propuesta
textarea.noborde {
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #ffffff;
border: hidden;border:hidden;
}
Aunque si se sigue viendo un marco queda mejor .
Tal vez se lo pueda dejar incoloro …
Leave a Comment