Mostrar en un DIV el contenido que escribimos en un Textarea
Veamos cómo mostrar en un DIV el contenido que vamos escribiendo en un Textarea. Una tarea muy común para pedirle en un textarea a un usuario el texto que debe mostrarse, y luego mostrarlo en un Div tal y cómo se mostraría realmente dándole formato.
Para ello, necesitaremos seguir los siquientes pasos:
Cargar librerías necearias
En nuestro caso, sólo necesitaremos jQuery. Por lo que la cargáis en la cabecera del html. Por ejemplo la versión 3.5.1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>Los estilos a nuestro DIV
Atentos porque podéis aprovechar este código para hacer una de las cosas más liosas que hay: alinear verticalmente el texto que se vaya escribiendo. Inicialmente se centra tanto verticalmente como horizontalmente, y conforme vamos añadiendo lineas en el textarea, el contenido se va centrando solo en el div.
.tarjetacontenido {
width: 400px;
height: 300px;
line-height: 300px; /* Tiene el mismo valor que height */
color: #333;
position: relative;
background: #FFF;
text-align: center;
border: 1px solid #333;
}
.tarjeta-texto {
display: inline-block; /* Nos permite aplicarle el vertical-align */
vertical-align: middle; /* Aliniamos verticalmente al centro */
line-height: 1.3em; /* El texto que vayamos escribiendo, tendrá este espaciado */
text-align: center; /* Texto saldrá centrado horizontalmente */
}
.mitexto {
font-family: 'arial', serif;
font-size: 14pt;
}El objetivo es que en el DIV esté alineado al centro tanto verticalmente como horizontalmente.
El código HTML5
Aquí tenemos el código HTML que crea los bloque
<textarea id="mitextarea" name="contenido" cols="40" rows="3" onkeyup="changeTarjetaText()">
</textarea>
<div id="mitarjetacontenido" class="tarjetacontenido">
<div id="mitextotarjeta" class="tarjeta-texto kalamtexto"></div>
</div>Por un lado tenemos un TextArea con la captura de evento onkeyup=»» que hará que cada vez que escribamos una tecla dentro del TEXTAREA, se ejecute la función changeTarjetaText(), que es la encargada de que lo que se escriba en el textarea, se muestre en el DIV.
Por otro lado, fijaos que tenemos un DIV que engloba todo (mitarjetacontenido) y otro DIV anidado que contendrá el texto (mitextotarjeta) y será el que se vaya alineando verticalmente y horizontalmente.
Código jQuery
Ahora que tenemos el estilo y el HTML5 necesario, vamos a ver el código JavaScript (jQuery) que se encarga de escribir lo que hay en el TextArea en el DIV. Recuerdo que esta función se llama desde la declaración del TextArea en el onkeyup=»»
function changeTarjetaText()
{
var textotmp = $("#mitextarea").val();
$("#mitextotarjeta").html(textotmp);
}Cada vez que pulsamos una tecla en el textarea, capturamos el valor que tiene y lo escribe en el DIV, substituyendo todo el contenido.
Problema con los saltos de linea
Si habéis llegado hasta aquí, veréis que si dentro del textarea se pulsa el salto de linea (tecla Intro), en el DIV no tiene efecto. No salta la linea. Veamos cómo podemos hacer para que cuando se pulse salto de linea en el textarea, también lo haga en el DIV. Sólo debemos añadir la siguiente modificación al código anterior de la función changeTarjetaText():
function changeTarjetaText()
{
var textotmp = $("#mitextarea").val();
$("#mitextotarjeta").html(textotmp.replace(/\n/g,"<br>"));
}Fijaos que cambio el textotmp por textotmp.replace(/\n/g, «<br>»))
Esta función reemplaza el salto de linea de un textarea por un BR en el DIV.
El código en CodePen
En este enlace, veréis el código en acción:
Espero que os haya sido de utilidad el artículo para mostrar en un DIV el contenido que escribimos en un Textarea.
Más información