Foros del Web » Programando para Internet » Javascript »

contador de diferentes teclas con limite

Estas en el tema de contador de diferentes teclas con limite en el foro de Javascript en Foros del Web. hola amigos de forosdelweb, estoy realizando un contador de teclas presionadas, digamos la letra A la S y la D cada ves que se presiona ...
  #1 (permalink)  
Antiguo 08/03/2014, 11:10
Avatar de giancarloffi  
Fecha de Ingreso: julio-2013
Mensajes: 63
Antigüedad: 10 años, 9 meses
Puntos: 0
contador de diferentes teclas con limite

hola amigos de forosdelweb, estoy realizando un contador de teclas presionadas, digamos la letra A la S y la D cada ves que se presiona una tecla se va contando independientemente digamos la "A "se presiono 10 veces el contador mostrara 10 y la letra s se preiono 23 veces el contador mostrara 23 pero la suma de las teclas presionadas debe de tener un limite de 100 osea la suma de todas debe ser 100

letra A = 25
letra S =50
letra D = 25

este es mi codigo que solo me cuenta la letra A
Código Javascript:
Ver original
  1. var limite = 99;
  2.  
  3.     $(document).ready(function()
  4.     {
  5.         $("#mensaje").keypress(function(e)
  6.         {
  7.             if ((e.keyCode || e.which) === 65 || (e.keyCode || e.which) === 97) {
  8.        
  9.                 var box = $(this).val();
  10.  
  11.                 var suma = box.length + 1;
  12.  
  13.                 if (box.length <= limite)
  14.                 {
  15.                     $('#divContador').html(suma);    
  16.                     $('.divContador1').html(suma);
  17.                 }
  18.             }
  19.                    
  20.             else
  21.             {
  22.                 e.preventDefault();
  23.             }
  24.            
  25.         });
  26.     });

estuve intentando con las otras letras hacer la suma pero sin resultado alguno si me pudieran guiar les agradeceria!!
  #2 (permalink)  
Antiguo 08/03/2014, 17:36
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años
Puntos: 131
Respuesta: contador de diferentes teclas con limite

Que tal amigo

keycode existe unicamente en javascript no en jquery

Jquery y javascript son lo mismo pero jquery tiene sus propias reglas

Si usaras el addeventlistener podrias usar keycode pero como estas usando jquery entonces debes usar which

(variable1 || variable2) === valor

Eso no existe, debes usar
variable1 === valor || variable2 === valor

En el ejemplo original usas keypress, en lo personal no me gusta keypress y keydown ya que si mantienes la tecla presionada va lanzando mas eventos

En cambio keyup, cuando la tecla llega a arriba cuenta por un evento

En el camino te encontraras con ese problemilla de keydown y keypress

e.preventDefault es muy util pero en esta ocacion sirve para nada, por eso mismo lo quite

No esta completo el ejemplo solo funciona con la letra A te faltaria gregar las otras letras y por cierto

El codigo de la letra S es 83
la letra D es 68

mayuscula o minuscula es lo mismo, al menos en mi compu utilizando chrome

Código Javascript:
Ver original
  1. var limite = 3;
  2.  
  3.     $(document).ready(function()
  4.     {
  5.         input = $("#mensaje");
  6.         $("body").keyup(function(e)
  7.         {
  8.             if (e.which == 65) {
  9.                 if(input.val() == limite)
  10.                 {
  11.                     alert("Ya se llego al limite");
  12.                     return false;
  13.                 }
  14.                 input.val((input.val()*1)+1);
  15.             }
  16.         });
  17.     });

Código HTML:
Ver original
  1. <input type="text" id="mensaje">

saludos
  #3 (permalink)  
Antiguo 08/03/2014, 20:58
Avatar de giancarloffi  
Fecha de Ingreso: julio-2013
Mensajes: 63
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: contador de diferentes teclas con limite

Hola hackjose, gracias por responder y aclararme esos puntos, me ayudo mucho a entender esos eventos, el codigo funciona bien, pero como mostrar cuantas veces se presiono la letra A, la letra S y la letra D, eso es lo que necesito y claro siempre que no pase la suma de sus contadores de 100. te agradesco la ayuda!!!
  #4 (permalink)  
Antiguo 10/03/2014, 12:04
Avatar de giancarloffi  
Fecha de Ingreso: julio-2013
Mensajes: 63
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: contador de diferentes teclas con limite

con este codigo casi cumple lo que quiero pero depeus del alert me deja incremetar los numeros hasta que cada casilla llega a 10, pero lo que necesito es que cuando el total me lelgue a 10 deje de incrementar los demas input alguien tien una forma mas adecuada de realizar este pequeño script?

Código Javascript:
Ver original
  1. var limite = 10;
  2.  
  3.             $(document).ready(function()
  4.             {
  5.                 input = $("#a");
  6.                 input2 = $("#s");
  7.                 $("body").keyup(function(e)
  8.                 {
  9.  
  10.                     var total = 0;
  11.                     $(".grupo .total").each(function() {
  12.  
  13.                         total = total + parseInt($(this).html());
  14.  
  15.                         if (total > (limite - 2))
  16.                         {
  17.                             alert("Ya se llego al limite");
  18.                             return false;
  19.                         }
  20.                     })
  21.  
  22.                     if (e.which == 65) {
  23.                         if (input.val() == limite)
  24.                         {
  25.                             alert("Ya se llego al limite");
  26.                             return false;
  27.                         }
  28.                         input.val((input.val() * 1) + 1);
  29.                     }
  30.  
  31.                     if (e.which == 83) {
  32.                         if (input2.val() == limite)
  33.                         {
  34.                             alert("Ya se llego al limite");
  35.                             return false;
  36.                         }
  37.                         input2.val((input2.val() * 1) + 1);
  38.                     }
  39.  
  40.                     var a = $(this).find("input[name=a]").val();
  41.                     var s = $(this).find("input[name=s]").val();
  42.                     $(this).find("[class=total]").html(parseInt(a) + parseInt(s));
  43.                 });
  44.  
  45.             });
  #5 (permalink)  
Antiguo 10/03/2014, 12:54
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años
Puntos: 131
Respuesta: contador de diferentes teclas con limite

Tambien pon el html porfavor
  #6 (permalink)  
Antiguo 10/03/2014, 13:54
Avatar de giancarloffi  
Fecha de Ingreso: julio-2013
Mensajes: 63
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: contador de diferentes teclas con limite

<style>
input {width:80px;}
.total div {float:left;}
.total .text {width:110px;}
.total .total {font-weight:bold;}
</style>


<div class="grupo">
<input type="text" name="a" id="a" value="0" />
<input type="text" name="s" id="s" value="0" />
<span class="total">0</span>
</div>

Etiquetas: contador, html, limite, teclas
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 15:18.