Telerik RadTextBox ValueChanged event and window.onbeforeunload - javascript

I have the following javascript on my page:
var isDirty = false;
function OnTextBoxValueChanged(sender, args)
{
isDirty = true;
}
window.onbeforeunload = function ()
{
if (isDirty)
{
return 'You have unsaved changes on the form.';
}
}
OnTextBoxValueChanged is the handler for RadTextBox's corresponding client event.
if user changes text in textbox, then moves focus to any other element and then presses 'close tab' in browser - confirmation window appears. This is correct. But the problem appears when user changes text and then immediately presses 'close tab'. In this case onbeforeunload event fires before onvaluechanged and isDirty variable has incorrect value (false) in onbeforeunload handler.
Am I doing something wrong or is there a workaround for my case?

It seems like that the only workaround in my case is usage of KeyPress event and filtering system keys (tab, enter etc.)
function OnKeyPress(sender, args)
{
if (!IsSysKey(sender, args))
{
isDirty = true;
}
}
function IsSysKey(sender, args)
{
var kc = args.get_keyCode();
return ((kc == 9) || (kc == 13) || (kc == 19) || (kc == 27) ||
(kc == 45) ||
(kc >= 33 && kc <= 40) ||
(kc >= 91 && kc <= 93) ||
(kc >= 112 && kc <= 123) ||
((kc == 8) && (sender.get_caretPosition() == 0) &&
(sender.get_caretPosition()[1] == undefined)) ||
((kc == 46) && (sender.get_caretPosition() == sender.get_value().length) &&
(sender.get_caretPosition()[1] == undefined)));
}

Related

Javascript - Disable Key Down selectively

My application has a image palette. I am using key board shortcuts to move next and previous images. The following is the code:
window.addEventListener('keydown', function(e) {
if (e.which == 37 || e.which == 65) {
beforeAfterImages(1);
gtfval();
}
if(e.which == 39 || e.which == 68) {
beforeAfterImages(2);
gtfval();
}
})
In the same page, I have a button, that opens a modal window. The modal window has fields for text input. During text input When I press a or d the image palette behind the modal keeps moving. Can I disable the keydown functions, when I open the modal window. I tried the following:
$('#myModal').click(function() {
window.addEventListener('keydown', function(e) {
if (e.which == 37 || e.which == 65) {
return false;
}
if(e.which == 39 || e.which == 68) {
return false;
}
})
});
When you open the modal, you can edit a variable, like var isModalOpen. Then check that everytime the user presses the keys:
window.addEventListener('keydown', function(e) {
if(modalIsOpen) return; // this
if (e.which == 37 || e.which == 65) {
beforeAfterImages(1);
gtfval();
}
if(e.which == 39 || e.which == 68) {
beforeAfterImages(2);
gtfval();
}
})

Disable print screen option in IE,but the code works fine with google chrome

Print screen option has been disabled in Google Chrome with the below js code.
document.onkeydown = keydown;
document.onkeyup = keyup;
function keydown(e) {
console.log("key down triggered");
var keystroke = String.fromCharCode(event.keyCode).toLowerCase();
if (e.keyCode == 44 || e.keyCode == "44" || e.which == 44 || e.which == "44") {
e.cancelBubble = true;
e.preventDefault();
e.stopImmediatePropagation();
}
if (e.ctrlKey && (e.key == "P" || e.key == "C" || e.key == "A" || e.key == "p"||e.key == "c" || e.key == "a" || e.charCode == 16 || e.charCode == 112 ||e.keyCode == 80) || (e.keyCode == 44) || (e.keyCode == 123)) {
//alert("Inspect element & Print &cut/copy option is restricted");
e.cancelBubble = true;
e.preventDefault();
e.stopImmediatePropagation();
}
if (e.keyCode > 111 && e.keyCode < 124) {
//alert("Function option is restricted");
e.cancelBubble = true;
e.preventDefault();
e.stopImmediatePropagation();
}
if (e.key == "F11" || e.key == "f11") {
//alert("Function option is restricted");
e.cancelBubble = true;
e.preventDefault();
e.stopImmediatePropagation();
}
}
function keyup(e) {
debugger;
console.log("key up triggered");
if (e.keyCode == 44 || e.keyCode == "44" || e.which == 44 || e.which =="44") {
e.cancelBubble = true;
e.preventDefault();
e.stopImmediatePropagation();
}
if (e.keyCode > 111 && e.keyCode < 124) {
e.cancelBubble = true;
e.preventDefault();
e.stopImmediatePropagation();
}
if (e.key == "F11" || e.key == "f11") {
//alert("Function option is restricted");
e.cancelBubble = true;
e.preventDefault();
e.stopImmediatePropagation();
}
The above code works fine in Google Chrome.key code 44 for Print screen option is used.In IE all the function keys have been restricted,but the keyup and keydown function is not getting triggered,when in IE browser alone.
What is the alternate way to handle print screen option in IE Browser using jquery.?
And additionally the above code fails to prevent print screen when the user opens a bootbox alert pop up inside a web application.
Suggest a solution for the above 2 scenarios.
Don't.
No matter how clever your code, you can't stop me from focussing a different window on my second monitor and hitting Print Screen there to get a copy of whatever's on-screen that you're trying to stop me from screenshotting.
Or I could just open the browser console (even if you block F12 / Ctrl+Shift+I, I can still get there via the browser's menus) and type document.onkeydown = document.onkeyup = null; and break your entire guard.
It's not often that I "answer" a question by completely shutting it down, but you are wasting your time.

Detect keycode ALT+L via Javascript

I try to detect if a user presses F12 or ALT + L.
document.onkeydown = function (event) {
event = (event || window.event);
if (event.keyCode == 123 || (event.keyCode == 18 && event.keyCode == 76)) {
//do anything
return false;
}
}
What am I doing wrong?
event.keyCode contains only one value. You can use event.altKey do detect if the alt key is pressed.
document.onkeydown = function (event) {
event = (event || window.event);
if (event.keyCode == 123 || (event.keyCode === 76 && event.altKey)) {
//do something
return false;
}
}
The standard way is to create a bool to detect if the 'alt' key is currently held down and then a separate if to detect if that is true and if the L key as just been pressed - see the fiddle:
http://jsfiddle.net/L4cb9/1
var held = false;
...
else if (event.keyCode == 18) {held = true;}
if (held == true && event.keyCode == 76) {
alert();
}
...
document.onkeyup = function(event) {
if (event.keyCode == 18) {held = false;}
}
This is applicable to holding any combination of keys - you can create an array for multiple key holds greater than two:
held = [];
...
if (event.keyCode == i) {held[i] = true;}
...
and so on

jquery keypress: trigger click when ctl+x and ctl+s

I am trying to update and close a popup by using keypress.
if keypress - ctl+s = save
if keypress - ctl+x = exit
$(window).keypress(function(event) {
if ((event.which == 120 && event.ctrlKey) || (event.which == 19)){
$(".ps-button-close",object_popup).click();
//alert("Keys down are Ctrl + x + Return");
} else if((event.which == 115 && event.ctrlKey) || (event.which == 19)) {
// Trigger click.
("form.ps-item-form.page input[type=submit][name=update]",object_popup).click();
} else {
return true;
}
event.preventDefault();
return false;
});
But they don't work at all...
Any ideas how I can combine them perfectly?
edit:
seems to get them worked now...
if ((event.which == 115 && event.ctrlKey) || (event.which == 19)) {
// Trigger click.
$("form.ps-item-form.page input[type=submit][name=update]",object_popup).click();
} else if ((event.which == 120 && event.ctrlKey) || (event.which == 19)){
// Trigger click.
$(".ps-button-close",object_popup).click();
//alert("Keys down are Ctrl + x + Return");
} else {
return true;
}
Use
$("form input[type=submit] [name=update]").trigger('click');

javascript : key validation

im using javascript to validate keys in textbox. it is not working :(
function numeric(e) {
return ((e.keyCode == 8) ||
(e.keyCode == 9) ||
(e.keyCode > 47 && e.keyCode < 58) ||
(e.keyCode > 36 && e.keyCode < 41) ||
(e.keyCode == 46) ||
(e.keyCode > 95 && e.keyCode < 106) ||
e.keyCode == 190 ||
e.keyCode == 110);
}
help me...
function numeric(e) {
e = e || window.event;
keycode = e.keyCode || e.which;
if(keycode === 13){
alert("cheese");
}
}
I know that in I.E. you can set event.keyCode=0 to suppress the key appearing in the control. But I think you need to trap the onkeydown. Firefox might have an equivalent. This is good because it prevents the key actually "arriving" at the control.
Also keep in mind that you might need to handle combinations of Shift + key and alt + key.
a good debug technique for this sort of thing is to say windows.status = event.keyCode,
and you can see what the keycode is as you type it...
Just try out the following code. I have checked F5 keycode, you can check as you want
function disableKey(event)
{
if (!event) event = window.event;
if (!event) return;
var keyCode = event.keyCode ? event.keyCode : event.charCode;
if (keyCode == 116) {
showMsg("This functionality is disabled.");
window.status = "F5 key detected! Attempting to disabling default response.";
window.setTimeout("window.status='';", 2000);
// Standard DOM (Mozilla):
if (event.preventDefault) event.preventDefault();
//IE (exclude Opera with !event.preventDefault):
if (document.all && event && !event.preventDefault) {
event.cancelBubble = true;
event.returnValue = false;
event.keyCode = 0;
}
return false;
}
}
function setEventListenerForFrame(eventListener)
{
document.getElementById('your_textbox').onkeydown = eventListener;
//frames['frame'].document.onkeypress = eventListener;
}
<body onload="setEventListener(disableKey);">
Try this if you want a numbers only textbox:
function numbercheck(event) {
var unicode = event.charCode; var unicode1 = event.keyCode; if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Safari") != -1) {
if (unicode1 != 8) {
if ((unicode >= 48 && unicode <= 57) || unicode1 == 37 || unicode1 == 39 || unicode1 == 35 || unicode1 == 36 || unicode1 == 9 || unicode1 == 46)
{ return true; }
else
{ return false; }
}
}
if (navigator.userAgent.indexOf("MSIE") != -1 || navigator.userAgent.indexOf("Opera") == -1) {
if (unicode1 != 8) {
if (unicode1 >= 48 && unicode1 <= 57)
{ return true; }
else
{ return false; }
}
}
}
And in your textbox call it on the onkeypress event:
onkeypress="return numbercheck(event)"

Categories

Resources