jQuery Keyup Textarea
La idea principal de este artículo es disponer de algo muy parecido a lo que tiene el traductor de google en el cual aparece un elemento textarea donde podemos ir escribiendo el contenido a traducir y a su derecha va apareciendo el contenido traducido.
En el caso de este artículo no vamos a realizar la funcionalidad de traducir el contenido pero si el de trasladarlo al espacio de al lado mientras se escribe.
Para desarrollar esta idea vamos a emplear la librería jQuery y aplicar algunos estilos para representar la estructura.
Lo primero que deberemos hacer es incluir los estilos y librerías que vayamos a utilizar en el <head> de nuestra página:
<link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="jquery.js"></script>
También en el <head> deberemos incluir el código jQuery que emplea la acción principal que se quiere ilustrar:
<script type="text/javascript">
$().ready(function() {
$("textarea").keyup(function () {
var value = $(this).val();
$("#results").text(value);
}).keyup();
});
</script>
Con el código anterior lo que estamos diciendo es que cuando se vaya escribiendo carácteres en el elemento textarea, su valor lo vayamos trasladando al div con id=»results».
El código HTML que emplearemos en nuestra página quedará tan simple como el siguiente:
<div id="content"> <div id="left"> <h3>Escribe aquí el texto:</h3> <textarea name="content" id="content" rows="10" cols="40"></textarea> </div> <div id="right"> <h3>Resultado:</h3> <div id="results"></div> </div> </div>
Autor
¿Buscas trabajo de programador?
Una respuesta a “jQuery Keyup Textarea”
Deja una respuesta
105 artículos que te podrían interesar
Ver más sobre
Me servio bastante a enetender y aplicarlo gracias