Keyup event listener fires when enter is pressed on Chrome's Ominbox
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>
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");
}
});
Related videos on Youtube
Comments
-
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 inwindow
?) and firefox does not have this behaviour. When I look fore.target
, Chrome Inspector showsbody
.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 about 11 years
keypress
andkeyup
aren't the same thing. -
Manuel Bitto about 11 yearsI need that event for trigger other funny things inside my page ;)
-
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.