Capturing the f5 key press event in javascript using window.event.keyCode in window.onbeforeunload event is always 0, not 116

Question

I am creating an MVC application. It was necessary that the variable in the session be null when the application was closed (i.e. window / tab), but not when the application was updated. I tried this through the following code.

<script type="text/javascript"> window.onbeforeunload = function (e) { e = e || window.event; if (window.event.keyCode == 116) { alert("f5 pressed"); } else { alert("Window closed"); //call my c# code to make my variable null, eg:Session["myVariable"] = null; } }; </script> 

But when F5 is pressed, then "window.event.keyCode" is always 0, not 116. Because of this, my variable becomes zero even when I press the F5 key, which is not my requirement.

Even when the application (i.e. the web page) is closed, even then its 0 (which is probably correct).

Please note that the above part of the code is in the .cshtml file.

Can someone tell me where I'm wrong?

Answer 1

You must listen to various events, if you want crossborwser + to work, you must listen to the key event every time it is pressed, and not when loading:

 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) { alert("f5 pressed"); wasPressed = true; }else { alert("Window closed"); } } 

here is a demo: http://jsfiddle.net/FSrgV/1/embedded/result/

but if you just want to find out if the user leaves the page, you can simply use window.onbeforeunload : https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

Answer 2

Do not use e.keyCode == 166 use e.code == 'F5'.

  function fkey(e){ e = e || window.event; if( wasPressed ) return; function fkey(e){ e = e || window.event; if (e.code === 'F5') { alert("f5 pressed"); wasPressed = true; }else { alert("Window closed"); } } 

This is due to the fact that "t" and "F5" use the code number 116. If you click on the key code only, then if the user presses the "t" key, your page will be refreshed.

Answer 3

You can simply write it like this:

 $(document.body).on("keydown", this, function (event) { if (event.keyCode == 116) { alert('F5 pressed!'); } }); 

Answer 4

I agree with meo's decision, but I will add some changes.

when we use document.onkeydown = fkey; for example, on the page we have another method that affected document.onkeydown, then the browser will only detect the last event. However, when we use: jQuery (document) .on ("KeyDown", FKEY); even if we have another function to handle the keydown event, all functions will be activated.

see the following example to understand:

 var wasPressed = false; document.onkeydown = f1; document.onkeydown = f2; jQuery(document).on("keydown",f3); jQuery(document).on("keydown",f4); function f1(e){ e = e || window.event; if( wasPressed ) return; if (e.keyCode == 116) { alert("f5 pressed"); wasPressed = true; }else { alert("Window closed"); } } function f2(){ alert('f2'); } function f3(){ alert('f3'); } function f4(){ alert('f4'); } 

what will be shown here: only 3 warnings: f2, f3 and f4. and in this example, the function f1 does not start.

Answer 5

The modified version and work also after pressing 't'.

key 116 gets automatically pressed after 84

 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) { alert("f5 pressed"); }else { alert("Window closed"); } wasPressed = true; } 

Answer 6

 document.onkeydown = disableF5; document.onkeypress = disableF5 document.onkeyup = disableF5; function disableF5(e) { if ((e.which || e.keyCode) == 116) e.preventDefault(); };