Veiem com amb la llibreria Javascript jQuery podem escriure contingut a un DIV. Després, centrarem el text tant horitzontalment com verticalment.
HTML5 Escriure un text amb jQuery
El codi HTML on crearem un Textarea per recollir el contingut que l’usuari escriu, i un bloc DIV on es mostrarà el contingut
<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>Destaquem la crida a “onkeyup” que es fa al textarea, que s’encarrega de detectar cada vegada que l’usuari prem un tecla quan escrigui al mateix textarea.
Quan el TextArea captura l’event amb el “onkeyup”, crida la funció JavaScript que s’encarrega de passar el contingut del textarea al DIV que té la ID “mitextotarjeta”
Codi Javascript
Veiem el codi JavaScript que es crida des del onkeyup del textarea:
function changeTarjetaText()
{
var textotmp = $("#mitextarea").val();
$("#mitextotarjeta").html(textotmp.replace(/\n/g,"<br>"));
}Com podeu veure, a la primera línia, agafem el valor del textarea, i a la segona línia, assignem aquest contingut al bloc DIV amb ID “mitextotarjeta”. L’única cosa diferent és que canviem els salts de línia, pel codi HTML5 </br>
HTML5 – Centrar contingut horitzontal i vertical
Una vegada tenim el contingut del TextArea i l’escrivim al bloc DIV, el que farem és centrar-lo, tant horitzontal com verticalment. D’aquesta manera el text estarà completament centrat.
Per aquesta tasca, assignarem aquest estils amb 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;
}Exemple real a CodePen
Veiem l’exemple real com amb jQuery podem escriure contingut a un DIV
See the Pen Escribir en un DIV el contenido de un TextArea by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.
Més informació