Caracteres textarea

_cronos · #1 (**permalink**) 20/05/2010, 15:55

Hola gente,
estoy haciendo una página con un formulario en donde tengo un textarea, y me interesaría que en el textarea no se pudiesen introducir más de 1000 carácteres, por ejemplo. Tengo el siguiente código pero no me funciona :S

Código HTML:

Ver original<html>
<head><title>A</title></head>
<body>
<form name="Comentario" action="mailto:[email protected]" method="post" enctype="application/x-www-form-urlencoded" id="comid">
   &nbsp;<textarea id="coment" cols='55' rows='17' onkeypress="caract()"></textarea><br />
   &nbsp;<input id="numCaracteres" type='text' value="1000" size="7" ReadOnly />
   <br /><br />
   &nbsp;<input type='submit' value="Enviar comentario" />  <input type='reset' value="Borrar" />
  </form>
</body>
</html>

Código Javascript:

Ver original<script type='text/javascript'>
 var d = document;
function caract(){
  var caracter = d.getElementById('coment').value.length;
  var valor = d.getElementById('numCaracteres').value;
  valor == 1000 - caracter;
  if(caracter==1000){
   alert('Ya has alcanzado los 1000 caráceteres, por favor envía este comentario y luego otro nuevo. Gracias.');
  } 
 }
</script>

La cuestión es que coja el length del textarea y se lo reste a 1000 y eso me lo muestre en el input de abajo, y que si el length llega a 1000 salga un alert diciendo que se pasó de largo.

Gracias de antemano,
Saludos (:

zerokilled · #2 (**permalink**) 20/05/2010, 16:31

tienes algo que no hace sentido, aunque es una expresion valida pero realmente hace nada. en la linea #6 del script tienes valor == 1000 - caracter;. supongo que aqui quisistes asignar el resultado a la variable valor. pero luego analizando todo el codigo, tienes que modificar 3 lineas, de la 5 a la 7. lo que debes hacer:
#5 - adquirir la referencia del campo INPUT. en tu codigo estas obteniendo el valor contenido en lugar de la referencia.
#6 - asignar la diferencia al campo INPUT. desde la referencia valor escribe el resultado en la propiedad value.
#7 - determinar si la longitud llega a 1000. esta mas o menos bien, pero digamos si pego un texto que contiene mas de 1000 caracteres. dado que la comparacion es igualdad, si el texto pegado tiene mas de 1000 caracteres, el condicional valida como falso. tienes que comparar si es igual o mayor que 1000.

en adicion, te conviene truncar el texto cuando sobrepase el limite. es decir, capturar los primeros 1000 caracteres y asignarlo al TEXTAREA.

_cronos · #3 (**permalink**) 20/05/2010, 16:45

Bueno muchas gracias, desde luego llevaba media hora delante de esto y no me había dado cuenta del = y >= xD
Lo único que no entiendo es por qué tengo que hacer primero
var valor = d.getElementById('numCaracteres');
y depués
valor.value = 1000 - caracter;
De todas maneras lo cambié como me dijiste (creo) y sigue sin funcionar:

Código Javascript:

Ver original<script type='text/javascript'>
function caract(){
  var caracter = d.getElementById('coment').value.length;
  var valor = d.getElementById('numCaracteres');
  valor.value = 1000 - caracter;
  if(caracter>=1000){
   alert('Ya has alcanzado los 1000 carácteres, por favor envía este comentario y luego otro nuevo. Gracias.');
  } 
 }
</script>

Gracias :D

zerokilled · #4 (**permalink**) 20/05/2010, 16:59

de tu ultimo script, fijate que eliminastes la referencia de document. es decir, var d = document;.

Cita:

Lo único que no entiendo es por qué tengo que hacer primero
var valor = d.getElementById('numCaracteres');
y depués
valor.value = 1000 - caracter;

porque cada propiedad devuelve un tipo de valor. la propiedad value devuelve una copia del tipo string. los string no hacen referencia a la fuente original. es decir, no existe un enlace entre la variable y la fuente original del string. en cambio, el contenido devuelto por getElementById es una referencia del elemento. como dice la palabra, las referencias apuntan a una fuente. por esa razon primero debes obtener el elemento y luego acceder a la propiedad.

_cronos · #5 (**permalink**) 21/05/2010, 07:41

Ya lo de var d lo quité porque se sobreentendía, pero sigue sin funcionarme...
Estuve mirando por Internet y encontré esto que sí me funciona, pero no veo cuál es la diferencia con mi script:

Código Javascript:

Ver originalvar supportsKeys = false
   var f = document.getElementById('coment');
   function calcCharLeft(f) {
        lenUSig = f.lenSSig.value
        maxLength = 1000 - f.lenSysSig.value - lenUSig
        if (f.Coment.value.length > maxLength) {
            f.Coment.value = f.Coment.value.substring(0,maxLength)
            charleft = 0
        } else {
            charleft = maxLength - f.Coment.value.length
        }
 
        f.numc.value = charleft
}
 
    function textKey(f) {
    supportsKeys = true
    calcCharLeft(f)
}

Luego lo invoco con onkeyup y onkeydown textKey(this.form)
lenSysSig, lenUSig y LenSSig son 3 hidden pero su value es 0...
Saludos y gracias (: