Amb aquest post, comencem una nova subcategoria de Programació Web. Veurem exemples i tutorials en català de programació JavaScript. Mostrar a un bloc DIV el contingut que un usuari escriu a un textbox o textarea, enceta la programació en JavaScript.
Tutorial català: jquery i Javascript
Nivell: mitjà
Coneixements previs: Javascript i jQuery
De vegades, ens interessa agafar el text que està escrivint l’usuari a un camp d’un formulari, sigui un textbox o un textara, i mostrar-ho d’una forma més bonica i presentable en una previsualització.
Un exemple clar seria una targeta de felicitació. Un fons bonic, i deixem que l’usuari posi el text omplint-ho a un formulari, i que es vagi pre-visualitzant com quedaria a la targeta de felicitació.
El Codi
L’html
Haurem de crear una pàgina .html o .php amb el formulari:
<textarea id="mevatextarea" name="contingut" cols="40" rows="3" onkeyup="changeTargetaText()">
</textarea>
<div id="mevatargetacontingut" class="targetacontingut">
<div id="meutexttargeta" class="targeta-text"></div>
</div>Si us fixeu, hi ha un textarea que captura l’event OnKeyUp. I quan el captura, crida a la funció changeTargetaText(). I la funció aquesta farà que el que escriu al formulari, es mostri a la previsualització (el div amb id mevatargetacontingut).
Di resumidament, tenim un textarea i cada vegada que premem una tecla dintre per escriure-hi, es crida la funció changeTargetaText() i actualitza el bloc de previsualització
El CSS
El CSS que nosaltres hem utilitzat és aquest:
.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;
}El JavaScript
I per últim, el codi que s’encarrega de que cada vegada que es prem la tecla dintre del textarea, que es previsualitzi al DIV.
function changeTargetaText()
{
var texttmp = $("#mevatextarea").val();
$("#meutexttargeta").html(texttmp.replace(/\n/g,"<br>"));
}Primer, hem de tenir clar que al afegir el capturador OnKeyUp al textarea (apartat HTML), aquesta funció s’executa cada vegada que l’usuari prem la tecla dintre del textarea.
Llavors, s’agafa el valor del Textarea, i posteriorment el posem com a contingut al bloc DIV. Fixeu-vos que canvio el salt de línia a un textaarea /\n/g , per un salt de línia html <br>.
Exemple a CodePen
See the Pen Escribir en un DIV el contenido de un TextArea by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.
Desitjo que amb auqest article us quedi una mica més clar com escriure el contingut afegit a un textarea o textbox d’un formulari, a un div.
Més informació