javascript - Handling F5 in JQuery - Stack Overflow

admin管理员组

文章数量:1200420

I have a site where I would like to override F5 so that it doesn't refresh the page, but instead executes some ajax calls to refresh certain pieces. Is this possible?

EDIT: Because none of you seem to understand why I would want to do something like this, if you are genuinely interested then visit these links:

Open-source project (simple web-terminal):

Running demo of simple web-terminal:

Live implementation (The forum version):

I have a site where I would like to override F5 so that it doesn't refresh the page, but instead executes some ajax calls to refresh certain pieces. Is this possible?

EDIT: Because none of you seem to understand why I would want to do something like this, if you are genuinely interested then visit these links:

Open-source project (simple web-terminal): http://code.google.com/p/web-terminal

Running demo of simple web-terminal: http://web-terminal.net.pine.arvixe.com

Live implementation (The forum version): http://www.u413.com

• jquery
• javascript

Share Improve this question Follow edited Jan 24, 2011 at 23:35 ChevCast asked Jan 24, 2011 at 22:59 ChevCastChevCast 59.2k6666 gold badges221221 silver badges325325 bronze badges 19

• Why? I don't want to override the refresh button, just the F5 key. In much the same way you can override the ENTER key and stop it from submitting a form so you can better handle the events asynchronously. – ChevCast Commented Jan 24, 2011 at 23:04
• @Chevex That's hardly the same. I don't want some script altering how the function keys work; they are fundamental and largely de facto standardised. I also hope that this is not possible. – Lightness Races in Orbit Commented Jan 24, 2011 at 23:09
• 2 @chevex: Ok, I can see why you would want this functionality. Maybe you could look at using cookies to store the current navigation state, then when they refresh, take them to that location. I still think it's a bad idea to interfere with what people expect their browser to do. As other people have said though, it's your web application. :) – Alastair Pitts Commented Jan 24, 2011 at 23:19
• 1 I do like the idea of cookies. I could store command-line context there. Hmmm – ChevCast Commented Jan 24, 2011 at 23:30
• 3 To add to Alastair's comment (and that was what I was hinting at): it provides a more solid user experience when such a state is remembered. E.g., when I accidentally close the tab containing your forum, I'll have to navigate back to the topic I was after reopening the page. – Marcel Korpel Commented Jan 24, 2011 at 23:30

 |  Show 14 more comments

3 Answers 3

Sorted by: Reset to default 10

This is the same as the accepted answer above, except without capturing the 'keypress' event.

If you capture the 'keypress' event, you also block the 't' key. For some reason both the keycode and ASCII keycode are both captured if you use the 'keypress' event (which you can't see in the chrome debugger). The F5 key is '116', but the ASCII keycode for 't' is also 116, so with the 'keypress' event you block F5, but you also block 't' app-wide.

$(document).bind('keydown keyup', function(e) {
    if(e.which === 116) {
       console.log('blocked');
       return false;
    }
    if(e.which === 82 && e.ctrlKey) {
       console.log('blocked');
       return false;
    }
});

Here's the coffeescript just for fun :)

$(document).bind "keydown keyup", (e) ->
    if e.keyCode is 116
      console.log "blocked"
      return false
    if e.keyCode is 82 and e.ctrlKey
      console.log "blocked"
      false

Well, you could do that (at least in some browsers, I'm not sure if this works cross-browser), but it reaaalllly would be a pretty bad user experience.

$(document).bind('keypress keydown keyup', function(e) {
    if(e.which === 116) {
       console.log('blocked');
       return false;
    }
    if(e.which === 82 && e.ctrlKey) {
       console.log('blocked');
       return false;
    }
});

Anyway, even if that works, there are other ways for an user to refresh the site. Pressing ctrl + r (cmd + r) or just hit the refresh button. Well, the other hot-key combination can get blocked similar, but no way to block the refresh button.

--

It's maybe a huge better idea not to block those default browser behaviors, but to ask gracefully. That can be done by binding an event handler to the onbeforeunload event, which fires before a site is unloaded.

$(window).bind('beforeunload', function() {
    return 'Are you really sure?';
});

Here's one example on how overriding the F5 key will enhance user experience. I'm building the newsletter editor for my client and I need to prevent the page from reloading when user accidentally presses F5 key but instead it refreshes email preview created from entered html code.

本文标签： javascriptHandling F5 in JQueryStack Overflow