How to use keydown event in jquery without affecting all keys?

Question

I should prevent page refresh using pressing F5 or Ctrl+F5. I prepare following code to reach this aim, but when I press any key in the page the function is running and can't fill any textbox or press any other keys in the page. How can I solve this problem?

      $(" * ").bind('keydown', 'F5', function (e) {
        e.preventDefault();
        abp.message.confirm("Are You Sure To Refresh This Page?",
            function (isConfirm) {
                if (isConfirm) {
                    window.location = "NewForm?id=" + $("#Id").val();
                }
            });
    });

Possible duplicate of [capturing f5 keypress event in javascript using window.event.keyCode in window.onbeforeunload event is always 0 and not 116](https://stackoverflow.com/questions/14707602/capturing-f5-keypress-event-in-javascript-using-window-event-keycode-in-window-o) — SLePort, Jul 04 '18 at 05:35
Check this https://stackoverflow.com/questions/2482059/disable-f5-and-browser-refresh-using-javascript — Dhanushka Dolapihilla, Jul 04 '18 at 05:36
@DhanushkaDolapihilla I can't use this manner, because when F5 is pressed I want to confirm user, and I should preventDefault event action and in this Time the event will be run. — Azad, Jul 04 '18 at 05:43
@Azad, can you include that and complete what you are trying to achieve in the question, with better clarity. — Dhanushka Dolapihilla, Jul 04 '18 at 05:49
@Azad Asking some unclear question and spamming around the same comment doesn't look so good in this community. And the people trying to help you shouldn't have to follow up with all the answers and comments to figure out what exactly you want. — Romeo Sierra, Jul 04 '18 at 06:12
Still not clear enough. Tell me if i got it. 1. When F5 is pressed, you want to block refresh, and prompt user to confirm the refresh using your code mentioned here. 2. All the other keys should work without affecting your inputs etc. also, `$(" * ").bind('keydown', 'F5', function (e)` this would not catch the F5 keydown. rather check if `e.keyCode == 116` as suggested in many answers — Dhanushka Dolapihilla, Jul 04 '18 at 06:14
@DhanushkaDolapihilla Yse, exactly. My goal is what you said in your comment. Thanks. — Azad, Jul 04 '18 at 06:19
@Azad, Well, Don't you think, it should be mentioned there in your question? :) — Romeo Sierra, Jul 04 '18 at 06:46

NullPointer · Answer 1 · 2018-07-04T15:24:27.380

Correct keyCode for F5 is 116:

    $(function () {  
        $(document).keydown(function (e) {  
             if((e.which || e.keyCode) == 116){
              if(confirm("Your confirmation message...")){
                 e.preventDefault(); 
              }
             }
        });  
    });

<body>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
</body>

Added for the sake of completeness

Could combine e.ctrlKey to detect the press of Ctrl + F5 combination. Looks something like

if (evtobj.keyCode == 116 && evtobj.ctrlKey) alert("Ctrl+F5");

Found this working fiddle.

I can't use this manner, because when F5 is pressed I want to confirm user, and I should preventDefault event action and in this Time the event will be run. — Azad, Jul 04 '18 at 05:42

remonses · Answer 2 · 2018-07-04T05:52:11.673

0

Here you are trying to identify F5 function key event, for which you need the key codes.

If you refer here, the key code for F5 is 116.

Since you are trying to disable the document event, you need to add bind an event on key down of the document.

$(document).on("keydown", disableRefresh);

function disableRefresh(event){
   if(event.keyCode == 116){
     if confirm("whatever you want to confirm"){
       event.preventDefault(); 
     }
}

edited Jul 04 '18 at 05:52

answered Jul 04 '18 at 05:46

remonses

402
1
4
17

I can't use this manner, because when F5 is pressed I want to confirm user, and I should preventDefault event action and in this Time the event will be run – Azad Jul 04 '18 at 05:47
@Azad Edited as per your comment – remonses Jul 04 '18 at 05:53

score 0 · Answer 3 · answered Jul 04 '18 at 05:47

console.d = function(log) {
  $('#console').text(log);
}

var callback = function(e) {
  console.log(e.type, e);
  var text = e.type;
  var code = e.which ? e.which : e.keyCode;
  if (13 === code) {
    text += ': ENTER';
  } else {
    text += ': keycode ' + code;
  }
  console.d(text);
};

$('#input').keydown(callback);
$('#input').keypress(callback);
$('#input').keyup(callback);

$('.keydown').click(function(e) {
  var code = $(this).data('code');
  $('#input').trigger(
    jQuery.Event('keydown', {
      keyCode: code,
      which: code
    })
  );
});
$('.keypress').click(function(e) {
  var code = $(this).data('code');
  $('#input').trigger(
    jQuery.Event('keypress', {
      keyCode: code,
      which: code
    })
  );
});
$('.keyup').click(function(e) {
  var code = $(this).data('code');
  $('#input').trigger(
    jQuery.Event('keyup', {
      keyCode: code,
      which: code
    })
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p><label>input: <input type="text" name="foo" id="input" value="" /></label></p>

<p>
  <button class="keydown" data-code="13">Trigger keydown Enter</button>
  <button class="keypress" data-code="13">Trigger keypress Enter</button>
  <button class="keyup" data-code="13">Trigger keyup Enter</button>
</p>

<p>
  <button class="keydown" data-code="65">Trigger keydown 'a'</button>
  <button class="keypress" data-code="65">Trigger keypress 'a'</button>
  <button class="keyup" data-code="65">Trigger keyup 'a'</button>
</p>

<hr />

<div id="console"></div>

score 0 · Answer 4 · edited Jan 03 '23 at 17:56

0

Judging by the looks of the question and certain comments (your requirement is not clearly mentioned in the question), I suppose this is what you should do.

$(document).bind('keydown', function (e) {
        if(e.keyCode == 116 || (e.keyCode == 116 && e.ctrlKey)){
            e.preventDefault(); // Prevent default bevaior only if F5 or Ctrl+F5 [thanks to the first two commenters (y) :)]
            //This is from your original post
            abp.message.confirm("Are You Sure To Refresh This Page?",
                function (isConfirm) {
                    if (isConfirm) {
                        window.location = "NewForm?id=" + $("#Id").val();
                    }
            });
        }
    });
});

Check this fiddle out, to see this in action.

edited Jan 03 '23 at 17:56

halfer

19,824
17
99
186

answered Jul 04 '18 at 06:10

Romeo Sierra

1,666
1
17
35

1

"when I press any key in the page the function is running and can't fill any textbox or press any other keys in the page" Your answer would still give OP this problem right. Mainly because all the keydowns will call their preventDefault – Dhanushka Dolapihilla Jul 04 '18 at 06:15
1

@RomeoSierra You prevent the default behavior in first line of your function without specifying any key. So the function prevents all key down actions. – Azad Jul 04 '18 at 06:29
@DhanushkaDolapihilla, @Azad, That's my bad I didn't notice it in the first place. It should actually go inside the `if` block to check the event's keycode. Updated the answer. – Romeo Sierra Jul 04 '18 at 06:39

score -1 · Answer 5 · answered Jul 04 '18 at 05:34

-1

$(document).keydown(function(e){
    if(e.keyCode == 116){
         e.preventDefault();
         alert("Hello!");
         return false;
    }
})

answered Jul 04 '18 at 05:34

xujizhong

42
3

How to use keydown event in jquery without affecting all keys?

5 Answers5