Controlar el num de caracteres de textareas

lsobpla · #1 (**permalink**) 01/02/2008, 06:25

Hola!

He encontrado un script que te va contando el número de caracteres que introduces en un textarea con una barrita de progreso y un contador.
Va bien si lo utilizas para un único textarea, pero si tienes varios en la misma página y en cada uno quieres incluir esta utilidad, ¿cómo podría hacerlo para que funcione? ¿Conocéis sino algún otro script que sirva para varios textarea?

Código:

<style type="text/css">
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;
}

</style>
<script type="text/javascript">
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+")";
}
</script>
</head>
<body>
<div class="contenedor">
<textarea onkeyup="progreso_tecla(this)" value=""></textarea>
<div id="progreso">(0 / 250)</div>
</body>

Gracias por adelantado

Saludos!

lsobpla · #2 (**permalink**) 01/02/2008, 06:28

Ah! en este enlace es donde tienen el ejemplo...
http://sentidoweb.com/lab/js/textarea/textarea.html

JavierB · #3 (**permalink**) 01/02/2008, 09:41

Hola lsobpla

He modificado un poco el código:

Código PHP:

  <script type="text/javascript">
var max=250;
var ancho=300;
function progreso_tecla(obj) {
  var progreso = document.getElementById("progreso"+obj.id);  
  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+")";
}
</script>
</head>
<body>
<div class="contenedor">
<textarea id="1" onkeyup="progreso_tecla(this)" value=""></textarea>
<div id="progreso1">(0 / 250)</div>
<textarea id="2" onkeyup="progreso_tecla(this)" value=""></textarea>
<div id="progreso2">(0 / 250)</div>
</body>

Saludos,

lsobpla · #4 (**permalink**) 04/02/2008, 02:07

Muchas gracias por la respuesta!!
Lo he probado y funciona bien

Saludos!