jQuery get input value after keypress

jquery jquery-events
Or Weinberger picture Or Weinberger · Jan 9, 2012 · Viewed 259.3k times · Source

I have the following function:

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

For some reason, for the first keypress, I'm getting an empty string to the console log.

Answer

Frederik picture Frederik · Oct 16, 2013

Realizing that this is a rather old post, I'll provide an answer anyway as I was struggling with the same problem.

You should use the "input" event instead, and register with the .on method. This is fast - without the lag of keyup and solves the missing latest keypress problem you describe.

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

Demo here

Related questions

jQuery.click() vs onClick

I have a huge jQuery application, and I'm using the below two methods for click events. First method HTML <div id="myDiv">Some Content</div> jQuery $('#myDiv').click(function(){ //Some code }); Second method HTML <…

Read More
How to detect pressing Enter on keyboard using jQuery?

I would like to detect whether the user has pressed Enter using jQuery. How is this possible? Does it require a plugin? EDIT: It looks like I need to use the keypress() method. I wanted to know if anyone knows …

Read More
jQuery multiple events to trigger the same function

Is there a way to have keyup, keypress, blur, and change events call the same function in one line or do I have to do them separately? The problem I have is that I need to validate some data with …

Read More