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.
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
vista previa de HTML
- preguntó
- Web
- 496 Vistas
- 1 Respuestas
- solucionada
1 Respuesta
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!
Por favor, accede o regístrate para añadir un comentario.
Por favor, accede o regístrate para responder a esta pregunta.
En el blog
-
- 406866
- 1
- Jul 5, 2015
Sin Respuesta
-
- 95
- 0
- Mar 19
-
- 64
- 1
- Feb 26
-
- 155
- 0
- Ene 30
-
- 595
- 0
- Nov 7, 2023
-
- 260
- 0
- Sep 19, 2023
-
- 286
- 0
- Ago 21, 2023
-
- 364
- 0
- May 14, 2023
-
- 323
- 0
- Abr 21, 2023
- ver todas
Preguntas relacionadas
- Formulario web con html, Condiciones para subdivir el formulario
- Alguien me recomienda algunos libros para comenzar en HTML, JavaScript, PHP y CSS
- Vista previa e impresión en php
- Como cambiar idioma en contenido dinámico de mi web
- ¿Cómo puedo sumar los valores de un select, si el value es un string?
Actividad Reciente
Santiago2610 comentó hace 5 días
Acualizar ChoiceField en djangoSantiago2610 preguntó Mar 19
Acualizar ChoiceField en djangogonzalss preguntó Feb 26
Script /boot/ scrapingParkJo preguntó Ene 30
No me deja instalar Oracleelporfirio respondió Ene 10
Actualizar la imagen con los datos devuelto en un …ovedg preguntó Dic 31, 2023
Actualizar la imagen con los datos devuelto en un …Ehdez preguntó Nov 7, 2023
Necesito en wordpress un pluging que me calcule la…pedrourday preguntó Sep 19, 2023
Alternativas a ThreeJS y BabylonJS?pedrourday preguntó Ago 21, 2023
¿Que tecnologias y lenguajes me recomiendan?Fabio respondió Jul 11, 2023
plugin de efecto circular 3d en imagenes
Ultimas Preguntas
Preguntas relacionadas
- Formulario web con html, Condiciones para subdivir el formulario
- Alguien me recomienda algunos libros para comenzar en HTML, JavaScript, PHP y CSS
- Vista previa e impresión en php
- Como cambiar idioma en contenido dinámico de mi web
- ¿Cómo puedo sumar los valores de un select, si el value es un string?
Usuarios Top
- Leonardo-Tadei
- 227320 Puntos
- Peter
- 150460 Puntos
- white
- 75880 Puntos
- carlossevi
- 63580 Puntos
- magarzon
- 30650 Puntos
- pregunton
- 20400 Puntos
Todos los Usuarios Usuarios Nuevos
...