I am doing the secured web application. My client requirement is to don't allow the application to refresh using the F5 .
Also to restrict events of the Esc , Backspace keys.
I am using the jQuery 1.9.1.
My code is given below.
I can get the alert, but if I press the F5 button my page gets refreshed. I don't know why?
BackSpace also going back to the previous page.
$(document).on('keydown' , function(event) {
switch (event.keyCode) {
case 116 : // 'F5'
alert("116 :"+event.keyCode);
event.preventDefault();
event.returnValue = false;
event.keyCode = 0;;
break;
case 27: // 'Esc'
alert("27 :"+event.keyCode);
event.preventDefault();
event.returnValue = false;
break;
case 08: // 'BackSpace'
if (event.srcElement.tagName == "INPUT"
|| event.srcElement.tagName == "TEXTAREA") {
} else {
event.preventDefault();
event.returnValue = false;
event.keyCode = 0;
}
break;
}
});
Can any one point out me where I made a mistake ?
Look here. Try to enter something into input box and try 'f5', 'esc' and 'backspace' keys on frame. It works in jsFiddle under Mac Chrome browser, it should work on your browser also. When you preventing your event you should call stopProagation function. Moreover, when you calling srcElement you should call original events by event.originalEvent.srcElement because normalised jquery event doesn't contain srcElement property. In console it gives undefined property error. Also you have error like following event.keyCode = 0;*;*
$(document).on('keydown' , function(event) {
switch (event.keyCode) {
case 116 : // 'F5'
alert("116 :"+event.keyCode);
event.preventDefault();
event.stopPropagation();
console.log('hello');
break;
case 27: // 'Esc'
alert("27 :"+event.keyCode);
event.preventDefault();
event.stopPropagation();
break;
case 08: // 'BackSpace'
if (event.originalEvent.srcElement.tagName == "INPUT"
|| event.originalEvent.srcElement.tagName == "TEXTAREA") {
alert("27 :"+event.keyCode);
event.preventDefault();
event.stopPropagation();
} else {
alert("27 :"+event.keyCode);
event.preventDefault();
event.stopPropagation();
}
break;
}
});
Here is my solution ,
var x;
var isIE;
var e;
var code;
var ElementType;
document.onkeydown = whichkey;
function whichkey(e) {
isIE = (document.all ? true : false);
if (navigator.appName == "Microsoft Internet Explorer") {
switch (event.keyCode) {
case 112: //f1 button
if (isIE) {
document.onhelp = function() {
return (false);
};
window.onhelp = function() {
return (false);
};
}
event.returnValue = false;
event.keyCode = 0;
return false;
case 82: //R button
if (event.ctrlKey) {
event.returnValue = false;
event.keyCode = 0;
return false;
}
else {
return true;
}
case 113: //f2 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 114: //f3 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 115: //f4 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 116: //f5 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 117: //f6 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 118: //f7 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 119: //f8 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 120: //f9 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 121: //f10 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 123: //f12 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 8: //Backspace button
if (event.srcElement.tagName == "INPUT" || event.srcElement.tagName == "TEXTAREA") {
return true;
}
else {
return false;
}
}
}
else {
if (!e)
e = window.event;
if (e.keyCode)
code = e.keyCode;
else if (e.which)
code = e.which;
if (code == 112) {
//f1 button
return false;
}
if (code == 8) { // 'BS'
ElementType = e.srcElement || e.target;
if (ElementType.tagName == "INPUT" || ElementType.tagName == "TEXTAREA") {
return true;
}
else {
return false;
}
}
if (code == 113) {
//f2 button
return false;
}
if (code == 114) {
//f3 button
return false;
}
if (code == 115) {
//f4 button
if (event.altKey) {
return false;
}
else {
return false;
}
}
if (code == 116) {
//f5 button
return false;
}
if (code == 117) {
//f6 button
return false;
}
if (code == 118) {
//f7 button
return false;
}
if (code == 119) {
//f8 button
return false;
}
if (code == 120) {
//f9 button
return false;
}
if (code == 121) {
//f10 button
return false;
}
if (code == 123) {
//f12 button
return false;
}
if (code == 18) {
//altf4 button
return false;
}
if (code == 82) {
//R button
if (event.ctrlKey) {
return false;
}
else {
return true;
}
}
if (event.altKey && event.keyCode == 115) // disable alt+f4
{
event.keyCode = 0;
event.cancelBubble = true;
return false;
}
}
}
Related
I want to disable the ctrl key in the IE browser.I had tried some solution using javascript but nothing is working can someone please help me to find out the solution
document.onkeydown = function () {
if (event.keyCode == 17) alert('Ctrl Key is disabled');
};
document.onkeydown = function(e) {
if (e.altKey && (e.keyCode === 36)) {//Alt+home blocked.
return false;
}
if (e.altKey && (e.keyCode === 70)) {//Alt+f blocked.
return false;
}
};
function hookKeyboardEvents(e) {
// get key code
var key_code = (window.event) ? event.keyCode : e.which;
// case :if it is IE event
if (window.event)
{
if (!event.shiftKey && !event.ctrlKey) {
window.event.returnValue = null;
event.keyCode = 0;
}
}
// case: if it is firefox event
else
e.preventDefault();
}
window.document.onkeydown = hookKeyboardEvents;
function Disable_Control_C() {
var keystroke = String.fromCharCode(event.keyCode).toLowerCase();
if (event.ctrlKey && (keystroke == 'c' || keystroke == 'v' || keystroke == 'p' || keystroke == 's' || keystroke == 'u')) {
alert("this function is disabled");
event.returnValue = false; // disable Ctrl+C
}
}
<body onkeydown="javascript:Disable_Control_C()">
this is what i do it to run in the IE...
I'm creating a canvas game for fun, and I'm trying to re-factor some of my multiple else if statements to use object lookup tables instead.
This is my current code for assigning variable values on keydown:
function keyDown(e) {
keypressed = true;
if (e.keyCode == 39 || e.keyCode == 68) {rightKey = true; }
else if (e.keyCode == 37 || e.keyCode == 65) {leftKey = true;}
else if (e.keyCode == 38 || e.keyCode == 87) {upKey = true; }
else if (e.keyCode == 40 || e.keyCode == 83) {downKey = true; }
else if (e.keyCode == 80) { isPaused = !isPaused; document.body.classList.toggle('pause'); }
if (e.keyCode === 69) { startHit(); }
}
I want to assign both wsad keys and the arrow keys to do the same thing, thus the use of || in the if conditions.
I read that using an object literal lookup table is a faster way to achieve this and this is my attempt:
var codes = {
39 : function() {
return rightKey = true;
},
37 : function() {
return leftKey = true;
},
38 : function() {
return upKey = true;
},
40 : function() {
return downKey = true;
},
80 : function() {
isPaued = !isPaused;
document.body.classList.toggle('pause');
},
69 : startHit
}
codes[68] = codes[39];
codes[65] = codes[37];
codes[87] = codes[38];
codes[83] = codes[40];
function keyDown(e) {
keypressed = true;
codes[e.keyCode]();
}
This works just fine, but I'm not sure the assignment of the bottom keys is the best way to do this? I can't obviously use the || operator in the left hand assignment, so would there be a cleaner way to do this or should I just stick with the else ifs?
Also, I know I could use a switch statement, but I feel like it would look similar to the way I've done above.
Any advice would be great. Thanks.
Why not use a switch statement?
function keyDown(e) {
keypressed = true;
switch (e.keyCode) {
case 39:
case 68:
rightKey = true;
break;
case 37:
case 65:
leftKey = true;
break;
case 38:
case 87:
upKey = true;
break;
case 40:
case 83:
downKey = true;
break;
case 80:
isPaused = !isPaused;
document.body.classList.toggle('pause');
break;
case 69:
startHit();
}
}
what about this?
var codes = function (){
function rightKey(){
rightKey = true;
}
function leftKey() {
leftKey = true;
}
return {
39 : rightKey,
37 : leftKey,
'...': '...',
68 : rightKey,
65 : leftKey
}}()
I have a problem. Basically, what happens in my case is that the numbers in my textbox are autoformatted as I type. I don't want this to happen. What I want is that the numbers should be autoformatted only when the user clicks outside the textbox.
In my input tag I have :
onkeyup="format(event, this);"
My javascript function is :
function format(e, obj) {
if (e.keyCode == 36) {
press1(obj);
}
if (e.keyCode == 13) {
return false;
}
if ((e.keyCode <= 34) || (e.keyCode >= 46 && e.keyCode < 58) || (e.keyCode >= 96 && e.keyCode <= 105)) { // //alert(e.keyCode);
obj.value = CommaFormatted(obj.value);
} else {
if (e && e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
} else {
e.cancelBubble = true;
e.returnValue = false;
}
return false;
}
}
where the press1 function is:
function press1(textControlID) {
var text = textControlID;
if (text.getAttribute("maxlength") == text.value.length) {
var FieldRange = text.createTextRange();
FieldRange.moveStart('character', text.value.length);
FieldRange.collapse();
FieldRange.select();
return true;
}
if (text != null && text.value.length > 0) {
if (text.createTextRange) {
var FieldRange = text.createTextRange();
FieldRange.moveStart('character', text.value.length);
FieldRange.collapse();
FieldRange.select();
} else if (text.setSelectionRange) {
var textLength = text.value.length;
text.setSelectionRange(textLength, textLength);
}
}
}
I really hope this could be solved. Please!
You could change onkeyup to onblur, which is the event that gets fired when the control loses focus - clicking out of it.
The onkeyup event fires with every keypress.
I would like to add this code to allow navigation through a website with left and right arrows. Is there any way to assign the window.location variable from an image that is linked on that page? I'm trying to make the left and right arrows on the page that are used for navigation on the page to be assigned to the left and right arrows on the keyboard.
img src="leftarrow.png" = previous page
img src="rightarrow.png" = next page
Code to be used: (other code is fine too)
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
document.onkeydown=keydownie;
} else {
document.onkeydown=keydown;
}
function keydownie(e) {
if (!e) var e = window.event;
if (e.keyCode) {
keycode = e.keyCode;
if ((keycode == 39) || (keycode == 37)) {
window.event.keyCode = 0;
}
} else {
keycode = e.which;
}
if (keycode == 37) {
window.location = '!!PREVIOUS_URLHERE!!';
return false;
} else if (keycode == 39){
window.location = '!!NEXT_URLHERE!!';
return false;
}
}
function keydown(e) {
if (e.which) {
keycode = e.which;
} else {
keycode = e.keyCode;
}
if (keycode == 37) {
window.location = '!!PREVIOUS_URLHERE!!';
return false;
} else if (keycode == 39) {
window.location = '!!NEXT_URLHERE!!';
return false;
}
}
Assuming the image is wrapped in an anchor tag (otherwise how would it work?), you could do something like this:
if (keycode == 37) {
img = document.querySelector("img[src='leftarrow.png']");
window.location = img.parentElement.href;
return false;
} else if (keycode == 39) {
img = document.querySelector("img[src='rightarrow.png']");
window.location = img.parentElement.href;
return false;
}
We're looking for the appropriate image/navigation link and getting the url from it's anchor container.
In my chat application there are some text fields which gets the user login details.
when filling the user details,If user suddenly pressed the ESC key,the data will be lost.
I need to disable the function of ESC key ? which event I need to use ? how can I do that.
my Java Script code is ,
function esc(e){
e = e || window.event || {};
var charCode = e.charCode || e.keyCode || e.which;
if(charCode == 27){
return false;
}
}
Searched a lot in Stack overflow and google.Nothing worked.Please any one help me to do that . Thanks..
You can bind an eventlistener to your input field to catch the Event when Esc is pressed and supress it.
document.querySelector("input").addEventListener("keydown",function(e){
var charCode = e.charCode || e.keyCode || e.which;
if (charCode == 27){
alert("Escape is not allowed!");
return false;
}
});
Example
I got the solution to control the " F5 , Esc , BackSpace(BS) " keys with the following code.
My Java Script code will be ,
document.attachEvent("onkeydown", win_onkeydown_handler);
function win_onkeydown_handler() {
switch (event.keyCode) {
case 116 : // 'F5'
event.returnValue = false;
event.keyCode = 0;
break;
case 27: // 'Esc'
event.returnValue = false;
event.keyCode = 0;
break;
case 08: // 'BackSpace'
if (event.srcElement.tagName == "INPUT"
|| event.srcElement.tagName == "TEXTAREA") {
} else {
event.returnValue = false;
event.keyCode = 0;
}
break;
}
}
Thanks who are all supported me to do this and for your suggestions.
I have used this for a login popup code:
jQuery(document).keyup(function(e){
if(e.keyCode==27 && popupStatus==1){
// alert('not allowed !!!');
// or any other code
return false;
}
});
I have done something similar using jquery to limit entry to numbers
$(inputBox).keydown(function(event) {
// Allow only backspace and delete
var allowed_keys = [
46, // delete
8, // backspace
];
if ($.inArray(event.keyCode, allowed_keys) != -1) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});