#jQuery : Contador de caracteres de un textarea by @webintenta

Fuente: webintenta

La siguiente función jQuery, aplicada a un textarea permite contar los caracteres que va introduciendo el usuario.

$(".contador").each(function(){
	var longitud = $(this).val().length;
			$(this).parent().find('#longitud_textarea').html('<b>'+longitud+'</b> caracteres');
			$(this).keyup(function(){
				var nueva_longitud = $(this).val().length;
				$(this).parent().find('#longitud_textarea').html('<b>'+nueva_longitud+'</b> caracteres');
				if (nueva_longitud == "140") {
					$('#longitud_textarea').css('color', '#ff0000');
				}
			});
		});

Un ejemplo completo, en el que podemos ver su aplicación, podría ser el siguiente:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
jQuery: Contador Caracteres
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$(".contador").each(function(){
	var longitud = $(this).val().length;
			$(this).parent().find('#longitud_textarea').html('<b>'+longitud+'</b> caracteres');
			$(this).keyup(function(){ 
				var nueva_longitud = $(this).val().length;
				$(this).parent().find('#longitud_textarea').html('<b>'+nueva_longitud+'</b> caracteres');
				if (nueva_longitud == "140") {
					$('#longitud_textarea').css('color', '#ff0000');
				}
			});
		});
});
// ]]></script>

<textarea class="contador" cols="50" name="caja" rows="20"></textarea></pre>
<div id="longitud_textarea"></div>
<pre>

Ver ejemplo en funcionamiento » »

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s