Change the behavior of the F5 button

Question

I want to change the behavior of the F5 refresh button of the browser for example when user click on F5 the page will not be refreshed and some alert will appear ,Currently I've tried with this code(which I find in after search in the forum) but it's not working,Im having reference to jquery cdn.any idea what is missing?

function disableF5(e) {
debugger;
    alert("clicked");
    if (e.which === 116 || e.keyCode === 116) {

        e.preventDefault();
        alert("clicked");
    }
}

$(function() {

    $(document).on("keydown", disableF5);
});

I also tried like following which is not working either ,any idea what I miss here?

 document.addEventListener('keydown', function(e) {
     debugger;
     if(e.which === 116 || e.keyCode === 116) {
         alert("1234");
         e.preventDefault();
     }

Edit

also tried with the following and still its not stop in the debugger and I dont see the alert (all the example which I provide stops in the document ready)

function disableF5(e) {
    if ((e.which || e.keyCode) === 116 || (e.which || e.keyCode) === 82) {
        debugger;
        alert("test")
        e.preventDefault();
    }}

    $(document).ready(function() {
        $(document).on("keydown", disableF5);
    });

Is it even possible? I think some special keys cannot be changed, like `echap`. But I could be wrong. — Vadorequest, Oct 20 '14 at 15:31
@Vadorequest- take a look at the following post http://stackoverflow.com/questions/2482059/disable-f5-and-browser-refresh-using-javascript — John Jerrby, Oct 20 '14 at 16:03

score 8 · Accepted Answer · edited May 23 '17 at 11:52

8

Try using this method that uses JavaScript and Jquery:

function disableF5(e) {
  if ((e.which || e.keyCode) == 116 || (e.which || e.keyCode) == 82)
  e.preventDefault();
};

$(document).ready(function(){
  $(document).on("keydown", disableF5);
});

Note:
I would not recommend preventing the page from refreshing however, I would recommend using a popup warning users about navigating away from the page eg:

window.onbeforeunload = function() {
    return "Are you sure you want to leave?";
}

source
I hope I helped

edited May 23 '17 at 11:52

Community

1
1

answered Oct 20 '14 at 15:29

Oliver

173
1
11

Hi Oliver,Thanks i've tried your code (edit little bit since there was some typo there please see my edit post ) any other idea?Thanks again! – John Jerrby Oct 20 '14 at 15:38
@JohnJerrby Hi yeah I did think you had already tried this. I have done a little research and it seems what you are trying to do is near to impossible, because you are trying to break a basic browser function. – Oliver Oct 20 '14 at 15:42
hi Oliver I think it's possible according to this post http://stackoverflow.com/questions/2482059/disable-f5-and-browser-refresh-using-javascript – John Jerrby Oct 20 '14 at 15:59
@JohnJerrby awesome I hope that fixes your problem – Oliver Oct 20 '14 at 16:07
Oliver,thanks! when I copy the code to empty html its working but when I run it from my APP its not,any idea what can be the problem? – John Jerrby Oct 20 '14 at 16:10
@JohnJerrby the code suggested on [link](http://stackoverflow.com/questions/2482059/disable-f5-and-browser-refresh-using-javascript) may not work in newer browsers or you may not have called JQuery correctly see here for [JSFiddle](http://jsfiddle.net/SpYk3/C85Hs/) example – Oliver Oct 20 '14 at 16:18

Mandalordevelopment · Answer 2 · 2014-10-20T15:49:32.013

Are you sure that other code can't interfere?

I have tried this one on a blank Page:

<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function disableF5(e) {
  debugger;
  alert("F5 Hit");
  if (e.which === 116 || e.keyCode === 116) {
    e.preventDefault();
    alert("F5 Identified");
  }
}

$(function() {
    alert("Page loaded");
    $(document).on("keydown", disableF5);
});
</script>

</html>

And it does what it should do

I open the Page => Alert "Page loaded"
I hit F5 => Alert "F5 Hit" => Alert "F5 Identified"

Since I do not get another "Page loaded" alert, I say, the page is not reloaded then I hit F5

May be you somewhere in your other Javascript override the keydown Handler for the document?

Do you get your alerts?

Edit:

e.keyCode === 82 identifies the "r" key ... only makes sense when you use the "ctrl" key, too (ctrl + r = reload)

if(e.keyCode === 82 && e.ctrlKey)

Thanks I've test your code in the browser and it seems to work,the problem is that when I take this code to my APP its not working ,the document ready is invoked but the F5 function is not working,any idea how to solve the problem?I try to search if someone override the key down like you said but didnt found (there is a way in chrome dev tools to find such of thing- not using CTRL+F) ? — John Jerrby, Oct 20 '14 at 15:57
I would perform a filebased search on the root folder of your website on the browser (or local) — Mandalordevelopment, Oct 20 '14 at 16:13

Change the behavior of the F5 button

2 Answers2