Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 622
devmonster Avatar asked Jun 13 '12 12:06

devmonster


People also ask

What is the difference between keypress () and Keydown ()?

keydown – fires when any key is pressed down, fires first, and always before the browser processes the key (e.g. inserting text, moving focus, etc). keypress – fires when a key that produces a character value is pressed down, fires after keydown , and before the browser processes the key.

Is keypress deprecated?

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.

What is the difference between jQuery's change () and keypress () events?

The change event occurs if the value has been changed when the element loses focus. The keypress event occurs every time you press down and release a (non control) key.

Which event is triggered continuously when the keyboards key is pressed?

The onkeypress event occurs when the user presses a key (on the keyboard). Tip: The order of events related to the onkeypress event: onkeydown.


3 Answers

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
});
like image 120
Beriz Avatar answered Oct 22 '22 09:10

Beriz


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}
like image 24
techfoobar Avatar answered Oct 22 '22 07:10

techfoobar


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.

like image 42
infojolt Avatar answered Oct 22 '22 09:10

infojolt