Vista previa con Javascript



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 ↓

#1 Jorge on 08.22.08 at 6:19 pm

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

#2 Jorge on 08.22.08 at 6:27 pm

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