« anterior | siguiente »

Home > 2007 > Junio > Viernes, 15 de Junio 2007 > Controlar el número de teclas de un textarea
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Vie15Jun2007

Controlar el número de teclas de un textarea

16:15 H (CET)| Temas: Javascript

Algo que hay que tener en cuenta muchas veces cuando trabajamos con formularios es la longitud del texto que introducimos en los textarea, ya que en muchos casos esa información se almacena en la BD y puede que el campo en dónde se guarda tenga un límite de tamaño.

textarea.png

No tengo muy claro según lo que dicta la accesibilidad y la usabilidad, si el ejemplo que muestro es del todo correcto. Lo normal es que si se supera la longitud de texto máximo, no deje introducir ningún carácter más. Pero en este caso simplemente vamos a avisar mediante una barra de progreso cuánto texto hemos introducido y cuánto nos queda. ¿Por qué? pues porque personalmente me ha pasado que muchas veces, al escribir mirando el teclado, ni me fijo en lo que pasa en la pantalla, por lo que me he podido pasar pulsando teclas un buen rato y no fijarme en que no se escribía nada. O también, cuando se hace un copy/paste, el texto puede ser mayor que lo permitido. En ambos casos es mejor tener el texto completo e ir reduciéndolo.

Como creo que quizás pueda serle útil a alguien este ejemplo, el desarrollo va a ser muy sencillo, ya que algunas veces los comentarios que recibimos de scripts antiguos son de gente con poco conocimiento. Luego, quien quiera usar JSON o Ajax (no sé para qué) o lo que quiera, que lo haga.

El procedimiento es sencillo, disponemos de un textarea, con un ancho definido mediante estilos. También existe una capa del mismo ancho que el textarea, y que se situará debajo del textarea. En el textarea se capturará el evento onkeyup, para que cuando se pulse una tecla, podamos ver la longitud del texto y modificar la barra de progreso.

<textarea onkeyup="progreso_tecla(this)" value=""></textarea>
<div id="progreso">(0 / 250)</div>
textarea {
  width: 300px;
  height: 200px;
}

#progreso {
  background: url(textarea.png) no-repeat;
  background-position: -300px 0px;
  width: 300px;
  height: 14px;
  text-align: center;
  color: #000000;
  font-size: 8pt;
  font-family: Arial;
  text-transform: uppercase;
}

La barra de progreso funciona de la siguiente manera, el fondo es una imagen con el progreso, inicialmente estará desplazada a la izquierda el tamaño de la barra. Por ejemplo, si la barra tiene un ancho de 300px, la posición izquierda del fondo será -300px. Cuando se pulse una tecla, se recalculará la posición izquierda, según la longitud del texto. Si la longitud supera el máximo, el fondo no será la imagen, sino de color rojo para avisar del error.

var max=250;
var ancho=300;
function progreso_tecla(obj) {
  var progreso = document.getElementById("progreso");  
  if (obj.value.length < max) {
    progreso.style.backgroundColor = "#FFFFFF";    
    progreso.style.backgroundImage = "url(textarea.png)";    
    progreso.style.color = "#000000";
    var pos = ancho-parseInt((ancho*parseInt(obj.value.length))/250);
    progreso.style.backgroundPosition = "-"+pos+"px 0px";
  } else {
    progreso.style.backgroundColor = "#CC0000";    
    progreso.style.backgroundImage = "url()";    
    progreso.style.color = "#FFFFFF";
  } 
  progreso.innerHTML = "("+obj.value.length+" / "+max+")";
}

Ejemplo

Relacionados

Feedback (11) » Formulario

1. Escael Marrero ~ Viernes, 15 Jun 2007 | 20:09H:

Muy interesante y útil este script (al menos para mí).
Tengo una pregunta si quisiera incluirlo en 2 textareas en la misma página como haría, es decir, yo tengo dos textareas y cada uno debe tener una cantidad diferentes de líneas, como hacerlos independientes?.
Se me ocurre duplicar el script pero esa opción es un poco burda no creen?.
Existe otra posibilidad???
Saludos

2. Escael Marrero ~ Viernes, 15 Jun 2007 | 22:09H:

Otra cosa y si el textarea es liquido?

3. Luis ~ Viernes, 15 Jun 2007 | 23:23H:

Hola Escael.

Lo que deberías hacer es crearte un objeto JSON que lo haga cree automáticamente las capas de progreso y modifique el evento onkeyup del textarea.

Si es líquido, en vez de mover el fondo en pixeles hazlo con %

Saludos

4. Escael Marrero ~ Viernes, 15 Jun 2007 | 23:57H:

Pudieras poner un ejemplo, he hecho de todo y no lo veo, recordemos que la imagen es fija (en el ejemplo 300px) si el textarea es liquido la barra va apareciendo hasta que llega a 300px pero a continuación no aparece más nada!!!, es decir, no hay más imagen para mostrar

5. Luis ~ Sábado, 16 Jun 2007 | 23:28H:

Mmmmmmmm, en eso tienes razón, si es líquida, entonces es difícil lo del fondo.

Déjeme que lo piense un poco y a ver si encuentro una solución.

De todas formas, mi opinión es que los textareas debería tener al menos un ancho máximo.

Saludos

6. Pekadito ~ Lunes, 18 Jun 2007 | 13:44H:

Hola!!
No es por fastidiar, pero al copiar un texto en el textarea usando el botón derecho de ratón sobre el textarea y eligiendo la opción "Pegar" no calcula la cuenta de los caracteres que has pegado.

Un saludo.

7. Luis ~ Lunes, 18 Jun 2007 | 18:41H:

Hombre, este ejemplo es más bien orientativo, a parte del fallo que has detectado, seguro que hay unos cuantos más.

Gracias.
Luis

8. Pekadito ~ Martes, 19 Jun 2007 | 08:24H:

La verdad es que me ha parecido muy chulo... y habíamos pensado que quedaría muy bien algo parecido en las aplicaciones de nuestros clientes, pero tenemos clientes un poco "exigentes" y se dedican a hacer pruebas hasta el absurdo con los textarea y una de ellas era la que te comenté y que siempre nos trae por el camino de la amargura.

Un saludo.

9. Luis ~ Martes, 19 Jun 2007 | 10:34H:

La verdad es que lo principal es saber cómo hacerlo, y luego meterle todo tipo de necesidades para que sea un código totalmente correcto, para eso es totalmente necesario lo que dices, estar atento a todas las cosas que pueda hacer el cliente para hacernos cascar la aplicación.

Si lo usáis ya me dirás que cosas le habéis añadido para incluirle :)

Saludos

10. Peyote ~ Miércoles, 11 Jul 2007 | 02:02H:

Si quieren evitar el poder copiar al textarea un texto mayor al permitido dando "pegar" con el boton derecho del mause yo lo solucione de la siguiente manera:
Usando la siguiente funcion en el evento "onPaste"

function maxLengthToPaste(texto,maxlong) {
var in_value, out_value, total, clip_board;
clip_board = window.clipboardData.getData("text");
total = clip_board.length + texto.value.length;
if (total > maxlong) {
in_value = texto.value + clip_board;
out_value = in_value.substring(0,maxlong);
texto.value = out_value;
alert("Esta intentando pegar un texto de longitud mayor al permitido, el texto sera acotado.");
return false;
}
return true;
}

onPaste="return maxLengthToPaste(this,250)">
Hola.

Cuando se elige "pegar" en el menu contextual que sale al presionar el boton derecho del mause sobre la textarea se dispara el evento "onPaste" en ese momento la funcion verifica el texto que hay en el portapapeles y suma su longitus al texto que ya tenemos en el textarea si esta suma supera la longitud maxima establecida se lanza un alert notificando(opcional)y se acota el texto al tamaño maximo.

Yo lo hice asi porque asi lo necesitaba, dejo a ustedes la labor de combinar esta funcion con la que ya tienen para obtener el resultado que desean.

NOTA1: solo sirve en internet explorer :-(
NOTA2: en la funcion progreso_tecla da mejores resultado invocandola tambien en el evento "onKeyDown", ya que si dejan una tecla presiona el contador seguira actualizandose, cosa que con solo "onKeyUp" no pasaba hasta que soltabas la tecla.

11. natacsha ~ Viernes, 08 Feb 2008 | 21:34H:

Poxa..no meu não aparece a barra de progresso...

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)