Keyup event listener fires when enter is pressed on Chrome's Ominbox

16,837

Solution 1

This happens because once you hit enter in the omnibox, the focus turns to the page. If you tried the same thing with onkeydown, the omnibox would change nothing, because as you said, it isn't a part of the document. One way to filter the omnibox's false event out would be to check that every keyup has a pair keydown.

<script>
var down = false;
document.addEventListener('keydown', function (){
    down = true;
}, false);

document.addEventListener('keyup', function (){
    if(down === true){
        alert('It was from the page!');
    }
    else{
        alert('Omnibox. Ignore it.');
    }
    down = false;
}, false);

</script>

Demo.

Make your own HTML page and try it preferably, because PasteHTML.com stuffs it into an iframe. For it to work correctly there, click on the text first to give the iframe focus.

Demo. Remember to use your mouse to focus on the omnibox and type, not a keyboard shortcut. (That fires the onkeydown event, creating a false positive)

Update: As of Chrome 35, this doesn't happen anymore. I don't know which version they fixed it on, however.

Solution 2

The solution for Chrome is simple: use keypress instead of keyup. This doesn't work in all cases (IE), so you may have to add a conditional to switch the type depending on the browser. However, this will solve your issue.

Note that looking for a specific keycode may negate your issue. Good luck.

Solution 3

You could filter for the keycode ...if that helps...13 is enter key

$(document).on('keyup', function(event){
  if( parseInt(event.keyCode,10) !== 13 ){
      alert("Hey");
  } 
});​
Share:
16,837

Related videos on Youtube

Manuel Bitto
Author by

Manuel Bitto

First solve the problem, then write the code

Updated on September 16, 2022

Comments

  • Manuel Bitto
    Manuel Bitto about 1 year

    In chrome browser, when using this snippet:

      $(document).on('keyup', function(){
        alert("Hey");
      });
    

    Every time I press enter in the url bar (for example when I cut and paste the url of the page itself) the event listener fires. Why does it happen?

    EDIT:

    It surprised me because url bar is not in document (maybe in window?) and firefox does not have this behaviour. When I look for e.target, Chrome Inspector shows body.

    I thought this could be caused by event bubbling so I tried this:

      $(document).on('keyup', function(e){
        e.stopPropagation();
        alert("Hey");
      });
    

    But it doesn't work. How can I prevent it from being triggered?

  • Some Guy
    Some Guy about 11 years
    keypress and keyup aren't the same thing.
  • Manuel Bitto
    Manuel Bitto about 11 years
    I need that event for trigger other funny things inside my page ;)
  • jedd.ahyoung
    jedd.ahyoung about 11 years
    @Amaan No, they aren't. However, they may be interchangeable depending on what functionality the asker is intending to implement with the key events.