Foros del Web » Programando para Internet » Javascript »

agregar contador de caracteres al lado de input o textarea

Estas en el tema de agregar contador de caracteres al lado de input o textarea en el foro de Javascript en Foros del Web. Hola amigos. Quiero saber como agregar un contador a un lado de un input o un textarea Por ejemplo que diga (0/500) que quiere decir ...
  #1 (permalink)  
Antiguo 08/01/2011, 23:57
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 13 años, 3 meses
Puntos: 9
agregar contador de caracteres al lado de input o textarea

Hola amigos.
Quiero saber como agregar un contador a un lado de un input o un textarea

Por ejemplo que diga (0/500) que quiere decir que se han escrito 0 caracteres de 500 que son el maximo.
Y comforme se vaya escribiendo, aumenten hasta llegar a 500/500

Y bueno, lo del limite no es preocupacion, eso con html y maxlenght se puede :)

Como lo puedo hacer?? el contador
  #2 (permalink)  
Antiguo 09/01/2011, 00:28
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: agregar contador de caracteres al lado de input o textarea

Hola:

Improvisando:

<input type="text" onkeypress="document.getElementById'cuenta').inner HTML = this.value.length" />(<span id="cuenta"></span>/500)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 09/01/2011, 03:48
Avatar de Manuellama  
Fecha de Ingreso: noviembre-2006
Ubicación: Zafra, Extremadura, Spain, Spain
Mensajes: 174
Antigüedad: 17 años, 4 meses
Puntos: 10
Respuesta: agregar contador de caracteres al lado de input o textarea

<input type="text" maxLength="10" id="texto" onKeyUp="document.getElementById('cuenta').innerHT ML = this.value.length+'/'+this.maxLength;" /><div id="cuenta"></div>
<script>document.getElementById('cuenta').innerHTM L = document.getElementById('texto').value.length+'/'+document.getElementById('texto').maxLength;</script>

<script language="javascript">

function attachEvent(name,elementName,callBack) {
var element = elementName;
if(typeof elementName == 'string') {
element = document.getElementById(elementName);
}
if (element.addEventListener) {
element.addEventListener(name, callBack,false);
} else if (element.attachEvent) {
element.attachEvent('on' + name, callBack);
}
}

function maxLength()
{

var field= event != null ? event.srcElement:e.target;
if(field.maxChars != null) {
if(field.value.length >= parseInt(field.maxChars)) {
event.returnValue=false;
alert("more than " +field.maxChars + " chars");
return false;
}
}
}

function maxLengthPaste()
{
event.returnValue=false;
var field= event != null ? event.srcElement:e.target;
if(field.maxChars != null) {
if((field.value.length + window.clipboardData.getData("Text").length) > parseInt(field.maxChars)) {
alert("more than " +field.maxChars + " chars");
return false;
}
}
event.returnValue=true;
}
</script>
<textarea rows="5" cols="6" maxLength="100" id="textarea1" onKeyUp="document.getElementById('cuenta2').innerH TML=document.getElementById('textarea1').value.len gth+'/'+document.getElementById('textarea1').maxLength;" ></textarea>

<div id="cuenta2"></div>
<script>document.getElementById('cuenta2').innerHT ML=document.getElementById('textarea1').value.leng th+'/'+document.getElementById('textarea1').maxLength;
attachEvent("keypress","textarea1",maxLength);
attachEvent("paste","textarea1",maxLengthPaste);
</script>



<script language="javascript">

function setTextAreaListner(eve,func) {
var ele = document.forms[0].elements;
for(var i = 0; i <ele.length;i++) {
element = ele[i];
if (element.type) {
switch (element.type) {
case 'textarea':
attachEvent(eve,element,func);
}
}
}
}
</script>
<script language="javascript">
setTextAreaListner("keypress",maxLength);
setTextAreaListner("paste",maxLengthPaste);
</script>

Dreamweaver pone automáticamente maxlength en el autocomplete, pero javascript sólo admite maxLength.
Para el código del textarea...ver ese link, que es de donde lo he modificado.
http://www.codeproject.com/KB/script...th_check.aspx;
  #4 (permalink)  
Antiguo 09/01/2011, 11:40
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 13 años, 3 meses
Puntos: 9
Respuesta: agregar contador de caracteres al lado de input o textarea

Ninguno de los dos codigos me funciona.
Caricatos
Lo probre de dos maneras:
1.- como tu lo pusiste
2.- le agregue un ( despues de document.getElementById ya que no veo donde inicie el parentesis para abrir, pero ni aun asi me sale el contador.

Aunque gracias por el esfuerzo.
  #5 (permalink)  
Antiguo 09/01/2011, 13:19
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: agregar contador de caracteres al lado de input o textarea

Hola:

Solo falta el paréntesis y "innerHTML", que parece que se corta por el editor.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: caracteres, contador, input, lado, 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 05:52.