Enter keypress event registers multiple times

[jmort253]

Hi All I just found a bug in Jquery! The keyup and keypress events sometimes catch duplicates if you press enter twice really fast. But this only happens if the event is attached to the JQuery object:

// this will allow duplicates if I press enter really fast twice.
$("#messageBox").keypress(function(e) {
                     //alert(e.keyCode);
                     if(e.keyCode == 13) {
                             chatApp.sendMessage();
                     }
             });

This doesn't use Jquery, and it does not suffer from the same problem. However, JavaScript id selectors are no fun.

// works great!  No duplicates!  But doesn't allow CSS selectors
document.getElementById("messageBox").onkeypress = function enterKey(e)  
             {  
                 var key = e.which||e.keyCode;  
  
                 if(key == 13)   
                 {
                     chatApp.sendMessage();
                 }
             };

As a workaround so I can use JQuery selectors, I just get the raw DOM element instead and then attach the event to the raw DOM element by using the JS array notation:

// use Jquery to get the element, then attach event to the RAW DOM element
           $('#messageBox')[0].onkeypress = function(e) {

                 var key = e.which||e.keyCode;  
  
                 if(key == 13)   
                 {
                     chatApp.sendMessage();
                 }
             };
             

I would say this is a relatively minor bug as the workaround is not difficult.

Summary: allows duplicates - BUG! $('#messageBox').keypress

no duplicates document.getElementById("messageBox").onkeypress

no duplicates AND can use CSS selectors $('#messageBox')[0].onkeypress

James

[snover]

Please provide a test case on ​jsFiddle demonstrating this issue. Thanks!

[addyosmani]

Thank you for submitting a ticket to the jQuery Bug Tracker. I have reproduced your original jQuery code being tested here ​Live Test Case.

Please note that the correct behaviour when pressing Enter (with your code) is that the alert and chatApp.sendMessage() are executed once, unless you are holding down the key continuously. Pressing enter 'twice really fast' would likely fall under the latter as with keypress, multiple keypresses result in multiple execution of any code/functions you've bound to that event.

Explanation

As per our API site: 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) cause keydown events but not keypress events.

Basically what this means is that if you are pressing a key repeatedly or 'really fast' and binding some behaviour to keypress, you may very well be causing it to fall back on registering multiple key-presses as desired user input. If you wish to only allow users to execute some behaviour on single keypresses, perhaps working with keydown and some additional logic would be more suitable to your application.

Where accidentally triggering keypress multiple times, it is not surprising that any code you would expect to be executed just once (on keypress) be executed more times than that. I hope that this explains why this is an invalid bug :)