F5 handling in jQuery

Question

I have a site where I would like to override F5 so that it does not refresh the page, but instead makes some ajax calls to update certain fragments. Is it possible?

EDIT:. Since none of you seem to understand why I would like to do something like this, if you are really interested, visit these links:

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

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

Real-time implementation (forum version): http://www.u413.com

Answer 1

This is the same as the accepted answer above, except that it does not capture the "keypress" event.

If you capture the "keypress" event, you will also lock the "t" key. For some reason, both the key code and ASCII code are both fixed if you use the "keypress" event (which you cannot see in the chrome debugger). The F5 key has a value of "116", but the ASCII code for "t" is also 116, so with the "keypress" event you block F5, but also block "t" in the application.

$(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 coffeescript is 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 

Answer 2

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

 $(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; } }); 

In any case, even if it works, there are other ways the user updates the site. By pressing ctrl + r ( cmd + r ) or just click the refresh button. Well, another hotkey combination may be blocked by a similar one, but not block the update button.

-

Perhaps it could be a great idea not to block the default behavior of the browser, but to request gracefully. This can be done by attaching an event handler to the onbeforeunload event, which fires before the site is unloaded.

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

Answer 3

Here is one example of how overriding the F5 key will improve user experience. I am creating a newsletter editor for my client, and I need to prevent the page from reloading when the user accidentally presses the F5 key, but instead updates the email preview created from the html code entered.