devmonster
devmonster

Reputation: 1739

jquery keypress event firing a few times

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

Upvotes: 8

Views: 16360

Answers (6)

Sukumar
Sukumar

Reputation: 13

Just unbind and bind it.

$('body').unbind().bind('keypress', function(e) {
....
}

Upvotes: 1

Chris
Chris

Reputation: 4593

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

Upvotes: 4

Beriz
Beriz

Reputation: 356

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
});

Upvotes: 14

joshschreuder
joshschreuder

Reputation: 1463

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/

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

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}

Upvotes: 8

infojolt
infojolt

Reputation: 5418

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.

Upvotes: 4

Related Questions