How to call javascript on F5 key press

Question

I need to call a function when F5 is pressed. While researching this, I found this function, which works -- it shows a message in the console and pops up an alert window:

<script>
document.onkeydown = fkey;
document.onkeypress = fkey
document.onkeyup = fkey;

var wasPressed = false;

function fkey(e){
        e = e || window.event;
       if( wasPressed ) return; 

        if (e.keyCode == 116) {
            console.log("f5 pressed");
            alert("f5 pressed");
            wasPressed = true; }
}
</script>

But I don't want the popup, I just want to call a function. When I comment out the line alert("f5 pressed"); the console.log doesn't show in the console any more. That means that without the alert message, I can't call another function.

I need to intercept F5 because my site is populated by Ajax and I want to repopulate the page as constructed by Ajax when F5 is pressed. As it is now it does not reconstruct the page on F5, it just reloads the original page structure.

My question is: how can I call a function on the press of F5 without showing an alert box?

This question is not a duplicate of the duplicate proposed above because I am not looking to disable the F5 button, just intercept it. The two answers below are what I'm looking for.

Did an error occur? Check the console, you should just be able to add your function call to it. You should show the current state of your code on your question — Ruan Mendes, Jul 05 '19 at 20:30
well makes no sense because browser is going to reload.... Did you set the console to preserve log on navigation? — epascarello, Jul 05 '19 at 20:32
No error occurred. The console.log message doesn't show if I comment out the alert line, but there are no errors. @epascarello - I want to intercept the F5 function because my site is populated entirely by Ajax, so when F5 is pressed I want to reload the current page structure as constructed by the Ajax. — RTC222, Jul 05 '19 at 20:36
You're not [preventing default F5 behavior](https://stackoverflow.com/questions/2482059/disable-f5-and-browser-refresh-using-javascript), so page _is_ fully reloaded and console is cleared. `alert` did not prevent the refresh, it just postponed it. YMMV by choice of web browser - which one(s) did you try? — Ruud Helderman, Jul 05 '19 at 20:42
Possible duplicate of [Disable F5 and browser refresh using JavaScript](https://stackoverflow.com/questions/2482059/disable-f5-and-browser-refresh-using-javascript) — Cypher, Jul 05 '19 at 20:43
Thanks for the comments. It's not a duplicate because I don't want to disable the F5 button. @Ruud Helderman - Firefox. — RTC222, Jul 05 '19 at 20:48

forgivenson · Accepted Answer · 2019-07-05T20:52:55.183

2

F5 reloads the page in many browsers.

With the alert there, the alert pops up before the browser reloads, so you can see the log in the console until you close the popup.

Without the alert, the log gets written to the console, then immediately the browser reloads the page, clearing the log.

You could try blocked the default behavior:

function fkey(e) {

    if (e.keyCode == 116) {
        e.preventDefault();

        // do stuff...
    }
}

However, I would recommend against blocking a standard key like F5, as this may provide a poor user experience. Of course, this all depends on who is using it and what you are making. Use your judgement.

edited Jul 05 '19 at 20:52

answered Jul 05 '19 at 20:42

forgivenson

4,394
2
19
28

I'm not trying to block the F5 key -- I need to detect it so I can call a javascript function to reconstruct the page as it was before the F5 click instead of reloading the landing page. A common problem with Ajax applications. I'll try e.preventDefault() to see if it helps. – RTC222 Jul 05 '19 at 20:50
1

`F5` does not refresh Safari or Chrome on macOS – Mulan Jul 05 '19 at 20:51
1

@user633183 Thanks for the info, I figured it wasn't all, I wasn't sure though. I'll change it to say "many" – forgivenson Jul 05 '19 at 20:52
To both @forgivenson and @ Andres2142 - e.preventDefault(); does what I'm looking for. Now the console.log message appears. Now I will see if I can call a different function when it's pressed. Probably will have no trouble. Thanks for both answers . – RTC222 Jul 05 '19 at 20:53

score 1 · Answer 2 · answered Jul 05 '19 at 20:48

1

If you want to disable the refresh action from your F5 key, then, you need to use this:

const disableRefreshFunction = (e) => { 
    if (e.keyCode === 116) {
        e.preventDefault();
    } 
};

answered Jul 05 '19 at 20:48

Andres2142

2,622
2
14
19

Mulan · Answer 3 · 2019-07-05T21:06:42.150

NB you only need to listen on the keydown event which fires before the other key events. keypress and keyup will fire too late for some keys and the browser or host OS will have already consumed the event before it gets to your handler.

This should be everything you need to get started.

Click Run code snippet below to see how to capture every keystroke and prevent its default behavior -

const preventDefault = f => event =>
  ( event.preventDefault()
  , f(event)
  )
  
const logKeypress = event =>
  console.log(event.which)
  
window.addEventListener('keydown', preventDefault(logKeypress))

h1 { font-family: sans-serif; }

<h1>click here, then press any keys...</h1>

This technique shows you how to separate event functions and them combine them in reusable ways. It is taken from my answer to this question.

How to call javascript on F5 key press

3 Answers3

Linked