Fem un exemple de com escriure a un TextBox / TextArea, i tot el contingut que escrivim, es mostri a un bloc DIV amb jQuery
Un exemple clar seria deixar que l’usuari escrigui en un textbox/textarea el text de felicitació, i nosaltres tinguem un DIV amb la previsualització de la felicitació. Conforme vagi escrivint, el text es va mostrant a la targeta.
Codi HTML5 amb el Bloc DIV
L’exemple que proposem és un textarea on l’usuari escriu el text de la felicitació:
<textarea id="meutextarea" name="contingut" cols="40" rows="3" onkeyup="changeTargetaText()">
</textarea>
<div id="mevatargetacontingut" class="targetacontingut">
<div id="meutexttargeta" class="targeta-text kalamtext"></div>
</div>Al codi, hem de destacar dues coses:
- El onkeyup=”changeTarjetaText()” del textarea, que és la funció que captura quan l’usuari prem una tecla quan està dintre del textarea.
- El bloc DIV té la ID mevatargetacontingut, i la del text que va dintre, té la ID meutexttargeta. Això serà important per treballar després.
Codi JavaScript (jQuery)
El que declarem ara, és la funció que hem comentat abans que s’havia d’executar cada vegada que l’usuari prem tecla dintre del textarea:
function changeTargetaText()
{
var texttmp = $("#meutextarea").val();
$("#meutexttargeta").html(texttmp.replace(/\n/g,"<br>"));
}Ja tenim el textarea assignant la funció que captura l’event prémer tecla, tenim definida aquesta funció funció que agafa el contingut del textarea i l’aplica al bloc, i ara ho posem tot centradet.
Centrem el contingut a un DIV
Hem de fer que el text, surti centrat tant horitzontalment com verticalment. Ho farem definint uns estils:
.targetacontingut {
width: 400px;
height: 300px;
line-height: 300px;
color: #333;
position: relative;
background: #FFF;
border: 1px solid #333;
text-align: center;
}
.targeta-text {
display: inline-block;
vertical-align: middle;
line-height: 1.3em;
text-align: center;
}
.meutext {
font-family: 'arial', serif;
font-size: 14pt;
}Veiem l’exemple en acció
Aquí teniu l’exemple en acció. Podeu escriure i veure com es va mostrant
See the Pen Escribir en un DIV el contenido de un TextArea by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.
Així doncs, espero que us sigui t’utilitat aquest exemple de com escriure el contingut escrit a un textbox/textarea a un bloc DIV amb la llibrería jQuery.
Salut
Més informació