Mostrar en Div contenido escrito en un textbox o textarea
Hace tiempo que no tocamos nada de Javascript, siendo estos post los más consultados del blog. Veamos cómo podemos mostrar en un div el contenido escrito en un textbox o textarea.
En muchas ocasiones, nos interesa coger lo que va escribiendo un usuario en un textbox, y luego mostrarlo de una manera concreta en un div.
Un ejemplo sería la previsualización de una tarjeta. Tenemos el diseño de una tarjeta como fondo de un DIV, y lo que escriba el usuario en un Formulario, se va mostrando encima de la tarjeta.
El código
El Html
El código necesario en nuestra página .html o .php sería el siguiente.
<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>Como podéis ver hay dos secciones importantes:
En una declaramos el textarea al que, y esto es muy importante, le asignamos la función changeTarjetaText() al evento onkeyup. Lo que se consigue de esta manera, es que cada vez que pulsemos una tecla dentro del textarea, se ejecutará la función changeTarjeraText()
Por otro lado, tenemos el div donde se irá escribiendo el resultado de forma más bonita o más personalizada.
El CSS
Aquí tenemos lo que define el estilo de DIV. Dicho de otra manera, tendríamos que diseñar la tarjeta en cuestión.
.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;
}El JavaScript
Y por último, el código que se encarga en cada pulsación de tecla cuando escribimos en el textarea, que se traspase todo al div.
function changeTarjetaText()
{
var textotmp = $("#mitextarea").val();
$("#mitextotarjeta").html(textotmp.replace(/\n/g,"<br>"));
}Cogemos el valor de todo lo que hay en el textarea, y lo escribimos en el div. Fijaos que en este caso, reemplazamos los saltos de linea en un textarea (/\n/g), por un salto en un div (<br />).
Este ultimo punto es lo que da dolor de cabeza… los saltos de línea.
Código ejemplo en CodePen
Podemos verlo en acción, y el código necesario, en CodePen:
See the Pen Escribir en un DIV el contenido de un TextArea by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.
Espero que con este pequeño ejemplo, podáis crearos vuestros propios códigos de previsualización. Mostrar en un div todo lo que un usuario haya escrito en un textbox o textarea no es difícil, lo complicado es adaptar el div a lo que necesitas (tarjetas, …)
Más información