Tengo la siguiente función:

$(document).ready(function() {
    $("#dSuggest").keypress(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

Por alguna razón, para la primera pulsación de tecla, estoy recibiendo una cadena vacía para el registro de la consola.

8 Comentarios

  1. 144

    Esto es debido a que keypress eventos se activan antes de el nuevo personaje se agrega a la value del elemento (para la primera keypress evento es disparado antes de que el primer carácter es añadido, mientras que el value todavía está vacío). Usted debe utilizar keyup lugar, que se dispara después de el personaje ha sido añadido.

    Tenga en cuenta que, si el elemento #dSuggest es el mismo que input:text[name=dSuggest] puede simplificar este código considerablemente (y si no lo es, tener un elemento con un nombre que es el mismo que el id de otro elemento, no es una buena idea).

    $('#dSuggest').keypress(function() {
        var dInput = this.value;
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
    • Funciona, pero con jquery 2.x esto está fuera de fecha, ahora, como la respuesta a continuación, utilizando el sobre y, de entrada, es la mejor manera de hacerlo ahora.
    • Sólo porque jQuery 2 está fuera, no significa que las personas no necesitan apoyo IE8 e inferiores. Y yo no veo nada en la documentación que sugiere que el apoyo real para la input tipo de evento.
    • Usted correcto, se deben dejar de apoyar es decir, el punto. La mayoría de las «soluciones» en jQuery 1.x son para el IE, por lo que realmente debe ser renombrado a jQuerIE.
  2. 171

    Darse cuenta de que este es un viejo post, me voy a dar una respuesta de todos modos, como yo estaba luchando con el mismo problema.

    Debe utilizar el "input" evento en su lugar, y registrarse con el .on método. Esto es rápido – sin el lag de keyup y resuelve la falta de la última pulsación de tecla problema que usted describe.

    $('#dSuggest').on("input", function() {
        var dInput = this.value;
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });

    Demo aquí

    • Este debe ser marcado como una adecuada respuesta – keyup tal vez resuelve la falta de carácter de problema, pero es problemática para determinar si el carácter de hecho fue escrito (y la clave no era por ejemplo «ficha» o «home»). +1 para ti
    • El problema es que no es compatible en los navegadores antiguos y IE9 no responden a caracteres eliminados.
  3. 32

    Uso .keyup en lugar de una pulsación de tecla.

    También uso $(this).val() o simplemente this.value para acceder a la entrada de corriente de valor.

    DEMO aquí

    Información sobre .keypress de jQuery docs,

    El evento keypress es enviado a un elemento cuando el navegador de registros
    entrada de teclado. Esto es similar a el evento keydown, excepto en el
    el caso de la clave se repite. Si el usuario presiona y sostiene una llave, un keydown
    se desencadena el evento de una vez, pero separados eventos de pulsación de tecla se activan
    para cada carácter insertado. Además, las teclas modificadoras (tales como
    Shift) de activación de eventos keydown pero no eventos de pulsación de tecla.

    • keyup es demasiado lento, y una clave puede ser presionado y sin liberados y las cosas que deben suceder. mejor usar keydown con un poco de tiempo de espera por lo que el valor cambia realmente.
    • el único inconveniente que he encontrado es que si el usuario pulsa más de uno de los caracteres del teclado juntos, no se registra correctamente.
  4. 5

    Debe interrumpir el hilo de ejecución para permitir la entrada de actualizar.

      $(document).ready(function(event) {
           $("#dSuggest").keypress(function() {
               //Interrupt the execution thread to allow input to update
                   setTimeout(function() {
                       var dInput = $('input:text[name=dSuggest]').val();
                       console.log(dInput);
                       $(".dDimension:contains('" + dInput + "')").css("display","block");
                   }, 0);
           });
      });
    • Funciona… pero keyup es el evento para utilizar
    • keyup retraso es demasiado lento para algunos propósitos, y también no auto-filtro de teclas modificadoras. Esto funciona mejor para mí.
    • mejor respuesta. keyup – lento y no se puede coger caracteres como @ con dos de tecla presionada.
  5. 4

    Esto es debido a que Keypress evento es disparado antes de que el nuevo personaje se agrega. Usar «keyup» del evento,que funcionará a la perfección en su situación.

    $(document).ready(function() {
        $("#dSuggest").keyup(function() {
            var dInput = $('input:text[name=dSuggest]').val();
            console.log(dInput);
            $(".dDimension:contains('" + dInput + "')").css("display","block");
        });
    });

    Quiero agregar a esto, si usted tiene muchos cuadros de texto y tienes que hacer la misma cosa en su evento keyup usted puede simplemente darles un común clase css(por ejemplo, commoncss) y aplicar el evento keyup como este.

    $(document).ready(function() {
        $(".commoncss").keyup(function() {
            //your code
        });
    });

    esto reducirá en gran medida el código como usted no tiene que aplicar el evento keyup por id para cada uno de los cuadros de texto.

  6. 1

    Yo estaba buscando un ES6 ejemplo (por lo que podría pasar mi desfibradora)
    Así que para otras personas que están buscando lo mismo:

    $('#dSuggest').keyup((e) => {
        console.log(e.currentTarget.value);
    });

    Yo también uso keyup debido a que usted obtiene el valor actual que se llena.

  7. 0

    get de jQuery valor de entrada después de la pulsación de tecla

    https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

    JS:

    i = 0;  
    $(document).ready(function(){  
        $("input").keypress(function(){  
            $("span").text (i += 1);  
        });  
    }); 

    HTML:

    <!DOCTYPE html>  
    <html>  
    <head>  
    <title>jQuery keyup() Method By Tutsmake Example</title> 
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    </head>  
    <body>  
    Enter something: <input type="text">  
    <p>Keypresses val count: <span>0</span></p>  
    </body>  
    </html>  

Dejar respuesta

Please enter your comment!
Please enter your name here