entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

vista previa de HTML

Buneos Días,
Tengo dos campos de input text y un textarea para un contenido en HTML y quiero que a medida que valla escribiendo en cada uno se valla mostrando una vista previa de como quedaría una vez que lo inserte y lo lea de la DB y se lo muestre al usuario.

1 Respuesta

1voto

Leonardo-Tadei Puntos227320

Podrías hacerlo así:

<!DOCTYPE html>
<html>
<head>
<title>Vista previa</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
*{ margin:0; padding:0; }
hr{ margin: 20px;}
.mitad{
    float: left;
    width: 50%
}
.unestilo{
    font-size: 20px;
    text-decoration: underline;;
}
.otroestilo{
    border: 1px solid grey;
    padding: 20px;
    color: red;
    font-style: italic;
}
</style>
<script type="text/javascript" >
function VistaPrevia(entrada, salida){
    document.getElementById(salida).innerHTML = entrada.value.replace(/\r?\n/g, "<br>");
}
</script>
</head>
<body>
<div class="mitad">
    Campo1: 
    <input type="text" name="campo1" id="campo1" onkeyup="javascript:VistaPrevia(this, 'vp1');" />
    <br />
    Textarea:
    <textarea name="txt" id="txt" onkeyup="javascript:VistaPrevia(this, 'vp2');" ></textarea>
</div>
<div class="mitad">
    Vista previa campo1:<br />
    <div id="vp1" class="unestilo"></div>
    <hr />
    Vista previa txt:<br />
    <div id="vp2" class="otroestilo"></div>
</div>
</body>
</html>

La vista previa aparece con los estilos que definís. Tendrás que crear un contenedor parecido al de destino para que se vea similar al resultado final.

Lo que hace el código es simplemente poner el contenido de lo tipeado en un DIV para que se vaya viendo.

El replace() con la expresión regular es para que el textarea respete los saltos de línea, que en realidad los reemplaza por un BR.

Espero te sirva!

0voto

dairon comentado

voy a probarlo ahora

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta