How to call javascript on F5 key press - Stack Overflow

admin管理员组

文章数量:1390300

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 ment 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.

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 ment 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.

• javascript

Share Improve this question Follow edited Jul 5, 2019 at 20:56 RTC222 asked Jul 5, 2019 at 20:27 RTC222RTC222 2,33322 gold badges3030 silver badges7171 bronze badges 6

• 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 Commented Jul 5, 2019 at 20:30
• well makes no sense because browser is going to reload.... Did you set the console to preserve log on navigation? – epascarello Commented Jul 5, 2019 at 20:32
• No error occurred. The console.log message doesn't show if I ment 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 Commented Jul 5, 2019 at 20:36
• 1 You're not preventing default F5 behavior, 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 Commented Jul 5, 2019 at 20:42
• Possible duplicate of Disable F5 and browser refresh using JavaScript – Cypher Commented Jul 5, 2019 at 20:43

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

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 remend 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.

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

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 bine them in reusable ways. It is taken from my answer to this question.

本文标签： How to call javascript on F5 key pressStack Overflow