Foros del Web » Programando para Internet » Javascript »

evento en textarea: quedan x caracteres

Estas en el tema de evento en textarea: quedan x caracteres en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/11/2011, 13:26
 
Fecha de Ingreso: octubre-2010
Ubicación: Guayaquil
Mensajes: 195
Antigüedad: 13 años, 5 meses
Puntos: 3
evento en textarea: quedan x caracteres

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> 
  #2 (permalink)  
Antiguo 07/11/2011, 13:56
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: evento en textarea: quedan x caracteres

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);
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 08/11/2011, 12:56
 
Fecha de Ingreso: octubre-2010
Ubicación: Guayaquil
Mensajes: 195
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: evento en textarea: quedan x caracteres

no...yo mismo lo hice
  #4 (permalink)  
Antiguo 08/11/2011, 13:38
 
Fecha de Ingreso: junio-2011
Ubicación: New York City
Mensajes: 13
Antigüedad: 12 años, 9 meses
Puntos: 3
Respuesta: evento en textarea: quedan x caracteres

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 original
  1. var contenido_textarea = "",
  2.     num_caracteres_permitidos = 10,
  3.     form;
  4.  
  5. function valida_longitud(){
  6.   form = document.forms[0];
  7.   form.caracteres.value = num_caracteres_permitidos;
  8.  
  9.   var num_caracteres = form.texto.value.length
  10.  
  11.   if (num_caracteres <= num_caracteres_permitidos){
  12.     contenido_textarea = form.texto.value  
  13.   }else{
  14.     form.texto.value = contenido_textarea
  15.   }
  16.  
  17.   if (num_caracteres >= num_caracteres_permitidos){
  18.     form.caracteres.style.color="#ff0000";
  19.   }else{
  20.     form.caracteres.style.color="#000000";
  21.   }
  22.  
  23.   cuenta()
  24. }
  25. function cuenta(){
  26.   form.caracteres.value = num_caracteres_permitidos - form.texto.value.length;
  27. }



Código HTML:
Ver original
  1.   <head>
  2.     <title>Que un Textarea no sobrepase longitud en caracteres</title>
  3.     <script>
  4.      // codigo aca
  5.     </script>
  6.   </head>
  7.  
  8.   <body onload = "valida_longitud()">
  9.     <form action="#" method="post">
  10.       <table>
  11.         <tr>
  12.           <td>Texto:</td>
  13.  
  14.           <td><textarea cols="40" rows="5" name="texto" onKeyDown="valida_longitud()" onKeyUp="valida_longitud()"></textarea></td>
  15.         </tr>
  16.         <tr>
  17.           <td>Caracteres:</td>
  18.           <td><input type="text" name=caracteres size=4></td>
  19.         </tr>
  20.       </table>
  21.     </form>
  22.   </body>
  23. </html>

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

Última edición por JaiMe_; 08/11/2011 a las 13:44
  #5 (permalink)  
Antiguo 09/11/2011, 08:31
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: evento en textarea: quedan x caracteres

Cita:
Iniciado por gabrielcorr4 Ver Mensaje
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 Ver Mensaje
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_ Ver Mensaje
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
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #6 (permalink)  
Antiguo 09/11/2011, 15:11
 
Fecha de Ingreso: junio-2011
Ubicación: New York City
Mensajes: 13
Antigüedad: 12 años, 9 meses
Puntos: 3
Respuesta: evento en textarea: quedan x caracteres

Cita:
Iniciado por IsaBelM Ver Mensaje
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 original
  1. document.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.

Última edición por JaiMe_; 09/11/2011 a las 15:17

Etiquetas: caracteres, evento, html, input, js, textarea
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:12.