jQuery Escribir contenido en div

Publicada el por

Veamos cómo escribir contenido en un bloque DIV con jQuery. Después, lo aliniaremos en el centro, tanto horizontalmente como verticalmente.

JavaScript Tutoriales

HTML5 – Escribir texto en un div con jQuery

Código HTML

El código html en el que creamos un Textarea para coger el contenido que el usuario escribe, y un bloque div donde se va mostrando ese contenido:

<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>

Destacamos la llamada a onkeyup que se hace en el textarea, que se encargará de detectar cada vez que el usuario des-pulse la tecla cuando se escriba en el mismo textarea.

Cuando el textarea captura el evento con el onkeyup, llama a la función JavaScript que se encarga de pasar el contenido del textarea al div con id «mitextotarjeta».

Código Javascript (jQuery)

Veamos el código javascript que se llama desde el onkeyup del textarea:

function changeTarjetaText()
{
  var textotmp = $("#mitextarea").val();
  $("#mitextotarjeta").html(textotmp.replace(/\n/g,"<br>"));
}

Como podéis ver, en la primera linea, cogemos el valor del textarea, y en la segunda linea, asignamos ese contenido al bloque div con id «mitextotarjeta». Lo único diferente, es que cambiamos los saltos de linea, por el código html5 <br>

HTML5 – Centrar contenido horizontal y verticalmente

Una vez ya tenemos que lo que escribimos en un textarea, se escribe en un bloque div, lo que haremos es centrarlo, tanto en horizontal como en vertical. De esta manera el texto se centra completamente.

Para ello, deberemos crear el CSS siguiente:

Código CSS

.tarjetacontenido {
  width: 400px; 
  height: 300px;
  line-height: 300px;
  color: #333; 
  position: relative;
  background: #FFF;
  border: 1px solid #333;
  text-align: center;
}
.tarjeta-texto {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.3em;
  text-align: center;
}
.mitexto {
  font-family: 'arial', serif; 
  font-size: 14pt;
}

Ejemplo real:

Veamos el código que hemos visto, en acción:

See the Pen Escribir en un DIV el contenido de un TextArea by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Más información