evento en textarea: quedan x caracteres

gabrielcorr4 · #1 (**permalink**) 07/11/2011, 13:26

Saludos, soy novato en js, tengo el siguiente codigo en js de limitar la cantidad de caracteres en un textarea pero me gustaria que quedara la advertencia o evento(asi se dice no?) de: "te quedan x caracteres" y no que me los cuente como en mi codigo, gracias no veo como hacerlo.

Código HTML:

<html>
<head>
	<title>Que un Textarea no sobrepase longitud en caracteres</title>
<script>
contenido_textarea = ""
num_caracteres_permitidos = 10
function valida_longitud(){
	num_caracteres = document.forms[0].texto.value.length
	
	if (num_caracteres <= num_caracteres_permitidos){
		contenido_textarea = document.forms[0].texto.value	
	}else{
		document.forms[0].texto.value = contenido_textarea
	}
	
	if (num_caracteres >= num_caracteres_permitidos){
		document.forms[0].caracteres.style.color="#ff0000";
	}else{
		document.forms[0].caracteres.style.color="#000000";
	}
	
	cuenta()
}
function cuenta(){
	document.forms[0].caracteres.value=document.forms[0].texto.value.length
}
</script>
</head>

<body>
<form action="#" method="post">
<table>
<tr>
	<td>Texto:</td>

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


</body>
</html>

IsaBelM · #2 (**permalink**) 07/11/2011, 13:56

vaya, tendré que editar el código. ya son varios que quieren hacer esa variación. me puedes dar la url de donde lo has sacado??

Cita:

document.forms[0].caracteres.value= parseInt(num_caracteres_permitidos - document.forms[0].texto.value.length);

gabrielcorr4 · #3 (**permalink**) 08/11/2011, 12:56

no...yo mismo lo hice

JaiMe_ · #4 (**permalink**) 08/11/2011, 13:38

Version levemente modificada, el problema era de logica, y la solución es basicamente lo que IsaBelM menciono. En este caso no es necesario llamar parseInt, puesto que ambos operadores son de typo numerico.

Código Javascript:

Ver originalvar contenido_textarea = "",
    num_caracteres_permitidos = 10,
    form;
 
function valida_longitud(){
  form = document.forms[0];
  form.caracteres.value = num_caracteres_permitidos;
 
  var num_caracteres = form.texto.value.length
 
  if (num_caracteres <= num_caracteres_permitidos){
    contenido_textarea = form.texto.value   
  }else{
    form.texto.value = contenido_textarea
  }
 
  if (num_caracteres >= num_caracteres_permitidos){
    form.caracteres.style.color="#ff0000";
  }else{
    form.caracteres.style.color="#000000";
  }
 
  cuenta()
}
function cuenta(){
  form.caracteres.value = num_caracteres_permitidos - form.texto.value.length;
}

Código HTML:

Ver original<html>
  <head>
    <title>Que un Textarea no sobrepase longitud en caracteres</title>
    <script>
     // codigo aca
    </script>
  </head>
 
  <body onload = "valida_longitud()">
    <form action="#" method="post">
      <table>
        <tr>
          <td>Texto:</td>
 
          <td><textarea cols="40" rows="5" name="texto" onKeyDown="valida_longitud()" onKeyUp="valida_longitud()"></textarea></td>
        </tr>
        <tr>
          <td>Caracteres:</td>
          <td><input type="text" name=caracteres size=4></td>
        </tr>
      </table>
    </form>
  </body>
</html>

pd: recuerda siempre utiliza el keyword var cuando declares variables.

IsaBelM · #5 (**permalink**) 09/11/2011, 08:31

Cita:

Iniciado por gabrielcorr4

no...yo mismo lo hice

que extraño!!
http://www.forosdelweb.com/f13/radio-buttons-que-controlen-caracteres-textarea-686044/

cuantas probabilidades hay de que haya una coincidencia tan marcada??

Cita:

Iniciado por IsaBelM

vaya, tendré que editar el código. ya son varios que quieren hacer esa variación. me puedes dar la url de donde lo has sacado??

yo también me lo atribuí como mio y resulta que no es así

Cita:

Iniciado por JaiMe_

En este caso no es necesario llamar parseInt, puesto que ambos operadores son de typo numerico.

no influye en nada que los valores sean numéricos. y si el operador fuese (/)?? nos resultaría un decimal.

en cuanto a usar o no var, en este caso es indiferente. ya que seguirán siendo variables globales, excepto; num_caracteres

para acabar, el código es francamente mejorable. de ahí que le pidiera a gabrielcorr4 me dijera la url para editarlo

JaiMe_ · #6 (**permalink**) 09/11/2011, 15:11

Cita:

Iniciado por IsaBelM

no influye en nada que los valores sean numéricos. y si el operador fuese (/)?? nos resultaría un decimal.

en cuanto a usar o no var, en este caso es indiferente. ya que seguirán siendo variables globales, excepto; num_caracteres

para acabar, el código es francamente mejorable. de ahí que le pidiera a gabrielcorr4 me dijera la url para editarlo

Empece la oración con *en este caso* en mi mensaje anterior puesto que es una suma de enteros, si el operador fuese / entonces la situación es diferente y deja de ser el mismo caso.

Usar var esta entre las buenas practicas en el desarrollo JS. Mientras que actualmente la mayoría de variables han sido declaradas en el global scope, los requerimientos pudiesen cambiar y refactoring seria necesario. Algún developer novato podría solamente mover el código hacia otro scope y consecuentemente pollute el global namespace y producir bugs. Esto se evita facilmente al simplemente agregar el keyword var.

Cuando dices "el código es francamente mejorable", estoy muy de acuerdo! especialmente esta linea

Código Javascript:

Ver originaldocument.forms[0].caracteres.value= parseInt(num_caracteres_permitidos - document.forms[0].texto.value.length);

Otra de las buenas practicas es siempre pasar el radix como parametro de la función parseInt. Caso contrario el comportamiento de la función no puede ser asegurado.

IsaBelM, mi recomendación es utilizar JSLint o JSHint para asegurarse de usar las buenas partes del lenguaje.

Saludos.