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();
}
});
});
5 answers
solution1
2 2018-07-04 05:34:43
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 .
solution2
0 2018-07-04 05:46:25
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();
}
}
solution3
0 2018-07-04 05:47:54
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>
solution4
0 2018-07-04 06:10:20
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.
solution5
-1 2018-07-04 05:34:35
$(document).keydown(function(e){ if(e.keyCode == 116){ e.preventDefault(); alert("Hello;"); return false; } })
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.