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
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 responder a esta pregunta.
Actividad Reciente
alyvrs preguntó Oct 19
Ayuda , necesito mostrar datos creados solo por el…ManHol preguntó Jul 9
pasar un archivo de excel a csv en pythonArtEze respondió Abr 24
Alguien sabe, no me ignorenArtEze seleccionó una respuesta Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze preguntó Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió Abr 24
No me deja instalar OracleArtEze respondió Abr 24
Formulario que guarde los datos de un jsonArtEze comentó Abr 24
Script /boot/ scrapingSantiago2610 comentó Mar 23
Acualizar ChoiceField en django
Ultimas Preguntas
Usuarios Top
- Leonardo-Tadei
- 227320 Puntos
- Peter
- 150480 Puntos
- white
- 75880 Puntos
- carlossevi
- 63580 Puntos
- magarzon
- 30650 Puntos
- pregunton
- 20400 Puntos