jquery keypress event firing a few times

Question

Hi I have setup an autocomplete input text. I am trying to fire the event of reprinting the table on click of a btn and on a enter keypress. the btn click works fine and but the enter key press seems like it fires a few times before stoping (meaning the table flickers)

$('body').bind('keypress', function(e) {
        if(e.keyCode==13){
             var str = $('#Filter').val();
            $('#Table').fadeOut("slow").load('printShorts.server.php?Sortby=<?echo $sort;?>&dir=<?echo $direction;?>&filter='+encodeURIComponent(str)+'&usergroup=<?=$usergroup?>&no-cache=' + (new Date()).getTime() ).fadeIn("slow");
        }

}); 

it doesn't happen all the time and acts differntly in differnt browsers..

Solution 1

The keydown event in combination with an html textbox will not be sufficient to prevent it from being fired multiple times. You can see this behavior in action on the jquery demo section of the keydown event: http://api.jquery.com/keydown/

One possible solution is to use the eventhandler "one" (see http://api.jquery.com/one/). Which ensures the event being handled only once:

jQuery("#createNewProduct").one("keydown", function (e) {
    //Do Stuff
});

Solution 2

This is correct behavior of the keypress event. The keypress event keeps firing as long as the key is down (like if you keep some char key pressed when in a textarea, the char is added that many times, this relates to keypress). For handle-once conditions, use either the key-down or key-up event depending on your requirement. Both key-up and key-down are fired just once. It goes like:

{Key-Down} {Key-Press} {Key-Press} ..(as long as key is down).. {Key-Press} {Key-Up}

Solution 3

The documentation for keypress states:

As the .keypress() method is just a shorthand for .on( "keypress", handler ), detaching is possible using .off( "keypress" ).

Thus, you can detach the handler by adding .off() before your binding. I would also replace the .bind() function with .on() since bind is now deprecated. Something like this should work:

$('body').off().on('keypress', function(e) {

Solution 4

http://api.jquery.com/keypress/

The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except in the case of key repeats. If the user presses and holds a key, a keydown event is triggered once, but separate keypress events are triggered for each inserted character. In addition, modifier keys (such as Shift) trigger keydown events but not keypress events.

Use keydown instead.

Solution 5

Try changing 'keypress' to 'keydown'.

The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except in the case of key repeats. If the user presses and holds a key, a keydown event is triggered once, but separate keypress events are triggered for each inserted character.

From http://api.jquery.com/keypress/

View more solutions