Keyboard shortcut ctrl+r not working for me

Question

In the snippet below, Ctrl+Enter (event.which == 13) is working. However, Ctrl+R (event.which == 9) is not.

if ($('.selector')) {                 
  $(document).keypress(function(event) {
    if ( event.altKey && event.which == 13 ) {                  
      $('.link a').trigger('click');                          
    } else if ( event.altKey && event.which == 82 ) {           
      $('.link a').trigger('click');     
    } else {
      return false;
    }
  });
}

I don't think that combination will ever work because `Ctrl + R` is reserved for "reloading". Not sure though. — Derek 朕會功夫, Aug 12 '13 at 00:56
Ooop, I was testing other combinations. Maybe I should clarify. No combination of ctrl+(character) works. — Scott Magdalein, Aug 12 '13 at 01:03
@ScottMagdalein - Did you try keycode 114 and add `event.preventDefault()` at the end? — Derek 朕會功夫, Aug 12 '13 at 01:05
Maybe has something to do with `event.altKey` vs `event.ctrlKey` ? — David Tansey, Aug 12 '13 at 01:07
@elclanrs - `keyPress` doesn't listen for the `tab` key unless you are using Firefox. — Derek 朕會功夫, Aug 12 '13 at 01:16

score 1 · Answer 1 · answered Aug 12 '13 at 00:59

1

Based on some quick testing at http://api.jquery.com/event.which/, it seems you want event.which == 82, not event.which == 9. Although most browsers tend to use Ctrl + R to refresh the page, so this might not be the best way to handle whatever you're doing.

answered Aug 12 '13 at 00:59

Michael Oliver

1,392
8
22

I'm using that site I linked to as a test, and it says 82. – Michael Oliver Aug 12 '13 at 01:01
But you can see it says 114 in my fiddle. – Derek 朕會功夫 Aug 12 '13 at 01:02
1

Oh yeah, in JS `keypress` and `keydown` uses different sets of keyCode, that's why. It should be 114. – Derek 朕會功夫 Aug 12 '13 at 01:03
Wow, didn't know `keypress` uses a different set of keycodes. @Derek朕會功夫 do you know where I can find that list? – Scott Magdalein Aug 12 '13 at 01:06
@ScottMagdalein, I'm suspicious the keycodes may be platform dependent.. or otherwise not well portable. – Thomas W Aug 12 '13 at 01:08
@ScottMagdalein - I couldn't find a full list right now, but meanwhile you can test it here: http://jsfiddle.net/DerekL/KEnjw/2/ – Derek 朕會功夫 Aug 12 '13 at 01:08
@ScottMagdalein - Also keep in mind that `keypress` [behaves differently than `keydown`](http://blog.pothoven.net/2008/05/keydown-vs-keypress-in-javascript.html), for example, it doesn't seem like it is picking direction keys, shift, tab, etc. (I don't know if it is a browser-specific thing or not). – Derek 朕會功夫 Aug 12 '13 at 01:13
@Derek朕會功夫 Bingo!!! The problem was with using `keypress` with a combo (`ctrl + r` or `alt + r`). Thank you! – Scott Magdalein Aug 12 '13 at 01:40
@Derek朕會功夫 If you leave your comment as an answer, I'll mark it as solved. Also, the keycode that worked for r is 82. – Scott Magdalein Aug 12 '13 at 01:40

Roko C. Buljan · Answer 2 · 2013-08-12T03:07:29.823

1

A cross-Browser solution to prevent Ctrl+R refresh page:

LIVE DEMO _{(works in Firefox, Chrome, Safari, Opera)}

var keyEv = navigator.userAgent.indexOf('Firefox')>-1?["keypress",114]:["keydown",82];
$(document)[keyEv[0]](function(e) {
  if ( e.ctrlKey && e.which == keyEv[1] ){     
      e.preventDefault();      
      alert("CTRL+R");  
    }
});

By simply testing for our navigator.userAgent you can decide what Key event listener to use and the respective R key code.

If you need to handle both R and ENTER in combination with Ctrl than you just need this little tweak:

LIVE DEMO (again all browsers :) )

var keyEv = navigator.userAgent.indexOf('Firefox')>-1?["keypress",114]:["keydown",82];
$(document)[keyEv[0]](function(e) {
  var k = e.which;
  if ( e.ctrlKey && k==keyEv[1] || k==13 ){ // no XBrowser issues with 13(Enter)
                                            // so go for it!
      e.preventDefault();      
      alert("Do something here");  
  }
});

edited Aug 12 '13 at 03:07

answered Aug 12 '13 at 01:06

Roko C. Buljan

196,159
39
305
313

@ScottMagdalein figured out a nice solution to your problem. take a look – Roko C. Buljan Aug 12 '13 at 02:14
@RokoC.Buljan - This is a really good solution only if he has 1 combination. – Derek 朕會功夫 Aug 12 '13 at 02:34
@Derek朕會功夫 he does not need any other combination. If you read carefully the question TITLE. The OP messed up a bit the `altKey` with `ctrlKey` and the relevant numbers. – Roko C. Buljan Aug 12 '13 at 02:37
@RokoC.Buljan - Did you even see the Ctrl + Enter combination in his code? – Derek 朕會功夫 Aug 12 '13 at 02:37
@Derek朕會功夫 I don't see any problem to implement the ENTER key as well ... http://jsbin.com/umareq/9 – Roko C. Buljan Aug 12 '13 at 02:43
1

@RokoC.Buljan - well I guess you deserve the upvote from me :) – Derek 朕會功夫 Aug 12 '13 at 02:45

Derek 朕會功夫 · Accepted Answer · 2013-08-12T02:28:32.983

1

The problem with your code is the keyPress listener behaves differently and uses a different set of keyCode. For keyPress the r key is 114 while for keyDown it is 82.

Also another problem is browser's default reload function will override your function because keypress is executed after you release the key. To solve this, change keypress to keydown.

$(document).keydown(function(e){
    if(e.which === 82 && e.ctrlKey){    //keycode is 82 for keydown
        alert("Pressed!");
        e.preventDefault();             //stop browser from reloading
    }
});

http://jsfiddle.net/DerekL/3P9NS/show

PS: It seems like Firefox is ignoring e.preventDefault (which by W3C standards it should). The best thing to do to support all browsers is to choose another combination, or use ctrl + alt + r.

if(e.which === 82 && e.ctrlKey && e.altKey){

edited Aug 12 '13 at 02:28

answered Aug 12 '13 at 02:07

Derek 朕會功夫

92,235
44
185
247

@RokoC.Buljan - Changed a little bit. Thanks. – Derek 朕會功夫 Aug 12 '13 at 02:31
Ok, but still, I think we have now **the best thing**. I tested my example in almost all browsers. No need to mix the `ALT` key in our story – Roko C. Buljan Aug 12 '13 at 02:33
@RokoC.Buljan - Indeed your solution does work in this case, but personally I don't think doing that is good for further maintenance. – Derek 朕會功夫 Aug 12 '13 at 02:36
I might agree with you, but there's AFAIK right now no other choice but to do it that way. What you mean exactly with maintenance? – Roko C. Buljan Aug 12 '13 at 02:38
@RokoC.Buljan - Well if in the future you want to add another combination or Firefox decided to change it, you will have to rewrite your code and it looks troublesome. – Derek 朕會功夫 Aug 12 '13 at 02:41
as for jQuery dropped `$.browser` from the API, believe me that `userAgent` is a killer. There more if you look at my code, if Chrome team changes the operation of those ones, there's always the `which` that used by jQuery tries always to be as xBrowsr compatible as possible: http://stackoverflow.com/questions/4471582/javascript-keycode-vs-which So I think as it stands right now we have a possible Future-proof solution – Roko C. Buljan Aug 12 '13 at 02:59

Keyboard shortcut ctrl+r not working for me

3 Answers3