contador de diferentes teclas con limite

[giancarloffi]

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:

var limite = 99;
 
    $(document).ready(function()
    {
        $("#mensaje").keypress(function(e) 
        {
            if ((e.keyCode || e.which) === 65 || (e.keyCode || e.which) === 97) {
       
                var box = $(this).val(); 
 
                var suma = box.length + 1; 
 
                if (box.length <= limite) 
                {
                    $('#divContador').html(suma);    
                    $('.divContador1').html(suma);
                }
            }
                    
            else 
            {
                e.preventDefault(); 
            }
            
        });
    });
 

estuve intentando con las otras letras hacer la suma pero sin resultado alguno si me pudieran guiar les agradeceria!!

[hackjose]

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:

var limite = 3;
 
    $(document).ready(function()
    {
        input = $("#mensaje");
        $("body").keyup(function(e) 
        {
            if (e.which == 65) {
                if(input.val() == limite)
                {
                    alert("Ya se llego al limite");
                    return false;
                }
                input.val((input.val()*1)+1);
            }
        });
    });
 

Código HTML:

<input type="text" id="mensaje">
 

saludos

[giancarloffi]

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!!!

[giancarloffi]

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:

var limite = 10;
 
            $(document).ready(function()
            {
                input = $("#a");
                input2 = $("#s");
                $("body").keyup(function(e)
                {
 
                    var total = 0;
                    $(".grupo .total").each(function() {
 
                        total = total + parseInt($(this).html());
 
                        if (total > (limite - 2))
                        {
                            alert("Ya se llego al limite");
                            return false;
                        }
                    })
 
                    if (e.which == 65) {
                        if (input.val() == limite)
                        {
                            alert("Ya se llego al limite");
                            return false;
                        }
                        input.val((input.val() * 1) + 1);
                    }
 
                    if (e.which == 83) {
                        if (input2.val() == limite)
                        {
                            alert("Ya se llego al limite");
                            return false;
                        }
                        input2.val((input2.val() * 1) + 1);
                    }
 
                    var a = $(this).find("input[name=a]").val();
                    var s = $(this).find("input[name=s]").val();
                    $(this).find("[class=total]").html(parseInt(a) + parseInt(s));
                });
 
            });
 

[hackjose]

Tambien pon el html porfavor

[giancarloffi]

<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>