Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Cuenta los caracteres escritos en un textarea


Script en Javascript que realiza la cuenta de los caracteres que se han escrito en un campo de formulario textarea, al mismo tiempo que se están escribiendo.


17/12/03 - El diseño de este script fue motivado por la necesidad de hacer la típica caja para enviar mensajes SMS desde Internet. El tamaño máximo de un mensaje SMS de móvil es de 160 caracteres, con lo que es muy útil que la propia página te informe sobre el número de caracteres que se llevan escritos en el mensaje, para que el interesado no se pase del máximo permitido.

El funcionamiento es muy sencillo de entender, pero en cualquier caso podemos ver el script en marcha para saber exactamente qué nos proponemos.

El formulario

La página presentará un formulario con dos campos. El primero con el textarea donde el usuario escribirá el mensaje y el segundo, un campo de texto donde mostraremos en todo momento los caracteres escritos.

El único detalle a tener en cuenta relacionado con Javascript es el par de eventos que tenemos definidos dentro del campo textarea, que sirven para llamar a la función que realiza la cuenta de los caracteres en el momento que el usuario presiona o suelta las teclas. Concretamente se utiliza el evento onKeyDown para definir las acciones a realizar cuando se aprete la tecla y onKeyUp, para definir acciones a ejecutar cuando se suelta la tecla apretada.

<form action="#" method="post">
<table>
<tr>
    <td>Texto:</td>
    <td><textarea cols="40" rows="5" name="texto" onKeyDown="cuenta()" onKeyUp="cuenta()"></textarea></td>
</tr>
<tr>
    <td>Caracteres:</td>
    <td><input type="text" name=caracteres size=4></td>
</tr>
</table>
</form>


El script que cuenta caracteres

Con el formulario y el par de eventos introducidos tenemos todo lo necesario para que se cuenten -y recuenten- los caracteres cada vez que el visitante, situado sobre el textarea, pulsa sobre las teclas, es decir, cada vez que se escribe texto en el textarea. Ahora simplemente nos queda definir la función que se encarga de realizar la cuenta propiamente dicha y situarla en el otro campo de texto del formulario.

<script>
function cuenta(){
       document.forms[0].caracteres.value=document.forms[0].texto.value.length
}
</script>


Puede que a muchos haya sorprendido la sencillez del script, pero es que no hace falta más.

La propiedad value del textarea contiene el texto escrito y a su vez, la propiedad length guarda el número de caracteres de dicho texto. Así, document.forms[0].texto.value.length equivale al número de caracteres introducidos dentro del textarea. Este valor se asigna al contenido del campo de texto del formulario donde guardamos el número de caracteres, mediante la propiedad value del campo: document.forms[0].caracteres.value.

Con todo ello, se mostrará en el campo de texto el número de caracteres del textarea. Se puede ver el ejemplo en una página aparte.

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 1 categoria relacionada
+ 2 comentarios (Añadir)
+ 1 comentario no revisado

 Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Taller de Javascript

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Scripts en Javascript


 Comentarios de los visitantes
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
Se muestran 2 comentarios revisados

 Comentario de Manuel
27/1/04 
Es sobre el artículo del JavaScript que cuenta los carácteres, me parecio muy bueno solo le falto algo importante, es la limitación, osea, máximo 160 caráctereses pero una vez se alcanza este valor se debe prohibir seguir escribiendo, esto es basico, ami personalmente me interesa así no solo para mensajes SMS sino para muchas otras cosas,

Saludos,

 Comentario de Jorge
27/1/05 
Para contar los caracteres y además limitar que el usuario no meta más de los máximos que hemos establecido, tenemos este script. El ejemplo tiene como máximo 125 caracteres

<html>
<head>
<SCRIPT language="JavaScript" type="text/javascript">

function contador (campo, cuentacampo, limite) {
if (campo.value.length > limite) campo.value = campo.value.substring(0, limite);
else cuentacampo.value = limite - campo.value.length;
}

</script>
</head>
<body>
<center>
<form name="form1">
sólo puedes entrar 125 caracteres.
<textarea name="mensaje" wrap=physical cols="28" rows="4" onKeyDown="contador(this.form.mensaje,this.form.remLen,125);" onKeyUp="contador(this.form.mensaje,this.form.remLen,125);"></textarea>
<input type="text" name="remLen" size="3" maxlength="3" value="125" readonly>te quedan todavía
</form>
</center>
</body>
</htm>

Añadir un comentario al artículo Añadir un comentario del artículo
 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se ha encontrado un comentario sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Taller de Javascript
Categorías
+Scripts en Javascript

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia