I'm trying to make an alert box pop up when a user tabs into an iframe. I can't get the alert box to pop up.
document.addEventListener("keydown", function(event) {
if (event.which == "9") {
let iframeSelector = document.querySelector("iframe")
if (document.activeElement == iframeSelector) {
alert("test");
}
}
})
I was able to get this to work by adding a setTimeout of 0 around your if statement, like this:
document.addEventListener("keydown", function(event) {
if (event.which == "9") {
let iframeSelector = document.querySelector("iframe")
setTimeout(() => {
if (document.activeElement == iframeSelector) {
alert("test");
}
}, 0)
}
})
I believe this happens because when the keydown event fires, the activeElement is still the previous focused thing. It seems like it should then work with keyup instead, but in my testing it doesn't.
So this solution seems a little hacky, but it did work in my testing.
Related
How do you disable/ view source/ and /inspect element/, ctrl + u ctrl+shift+I f12 menu bar and right click, also ctrl + s ctrl p ctrl+v ctrl+a ctrl+c and drag select page, please answer all parts that's possible, I prefer to do this will JavaScript array keycodes or html no php or other languages.also I want to block ifram use on my site like somesites such as google.
As I understand it is not possible to completely disable view source and inspect element, so I want minification of code and rest of my question answered instead.
Edit:
I solved alot of it myself, I used onkeydown return false to disable all keys, still need the arrays, I disabled inspect element menu bar by forcing browser to window.open I still need right click, however would like to add that I need a custom right click menu, I disabled the possibility to disable Javascript in order to stop the key block by using noscript function redirects. I also still need the drag and select part. I would still like betterways to fix it...maybe even just minify the code or encrypt it. Of anyone needs some of the code I used just reply. I just need to fix it.
It is not possible to prevent the user from inspecting code running on their machine. At the end of the day the HTMl they are getting delivered will be readable in plain text. You can cause a nuisance for most people, but this will not be a valid security measure - chrome extensions will still run, for instance, so if someone is using the NoScript extension it will disable all javascript.
A much better option would be to handle your logic serverside, and only send the client the information they need to know/requested.
There are some free javascript obfuscators, such as https://javascriptobfuscator.com/. Please remember that it is not a secure method, though.
I mean no matter how much you block it a person can just type
view-source:https://example.com
document.onkeydown = function(e)
{
if(event.keyCode == 123)
{
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0))
{
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0))
{
return false;
}
if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0))
{
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0))
{
return false;
}
}
e is a keyboard event. e.[key] returnes true if key pressed.
If document.onkeydown returns false, key doesn't count.
This programm seeing if code view combination pressed and returning false.
Example. if ctrl, shift and 'J' pressed - return false.
Bump
To the people saying it isn't possible, how would you recon this website managed to do so?
The following website disabled, view source, right click and the dev console.
I am genuinely interested.
https://www.techgyd.com/contact-facebook-directly/6579/
Edit:
all input from keyboard is disabled, but by adding "view-source:" before the httpps:// to the url to become:
view-source:https://www.techgyd.com/contact-facebook-directly/6579/
makes me able to see.
If you would like to know how they did that then take a look at their JS, raw copy/paste:
<script type="text/javascript">
//<![CDATA[
var show_msg = '';
if (show_msg !== '0') {
var options = {view_src: "View Source is disabled!", inspect_elem: "Inspect Element is disabled!", right_click: "Right click is disabled!", copy_cut_paste_content: "Cut/Copy/Paste is disabled!", image_drop: "Image Drag-n-Drop is disabled!" }
} else {
var options = '';
}
function nocontextmenu(e) { return false; }
document.oncontextmenu = nocontextmenu;
document.ondragstart = function() { return false;}
document.onmousedown = function (event) {
event = (event || window.event);
if (event.keyCode === 123) {
if (show_msg !== '0') {show_toast('inspect_elem');}
return false;
}
}
document.onkeydown = function (event) {
event = (event || window.event);
//alert(event.keyCode); return false;
if (event.keyCode === 123 ||
event.ctrlKey && event.shiftKey && event.keyCode === 73 ||
event.ctrlKey && event.shiftKey && event.keyCode === 75) {
if (show_msg !== '0') {show_toast('inspect_elem');}
return false;
}
if (event.ctrlKey && event.keyCode === 85) {
if (show_msg !== '0') {show_toast('view_src');}
return false;
}
}
function addMultiEventListener(element, eventNames, listener) {
var events = eventNames.split(' ');
for (var i = 0, iLen = events.length; i < iLen; i++) {
element.addEventListener(events[i], function (e) {
e.preventDefault();
if (show_msg !== '0') {
show_toast(listener);
}
});
}
}
addMultiEventListener(document, 'contextmenu', 'right_click');
addMultiEventListener(document, 'cut copy paste print', 'copy_cut_paste_content');
addMultiEventListener(document, 'drag drop', 'image_drop');
function show_toast(text) {
var x = document.getElementById("amm_drcfw_toast_msg");
x.innerHTML = eval('options.' + text);
x.className = "show";
setTimeout(function () {
x.className = x.className.replace("show", "")
}, 3000);
}
//]]>
</script>
or just look from line 86
I hope it helps
I am using command + h as a shortcut key in my website. It is not doing the function to be done. After I click something on the window only it works flawlessly. Here is my code..
window.onkeydown = function(event) {
if (event.keyCode == 72 && (event.metaKey == true)) {
//some function
}
}
Somebody try to rectify . I have included this code only after the dom gets loaded
window.onkeydown will only work if it is focused. So on body load you should set focus.
<body onload="setFocus()">
function setFocus(){
window.focus();
}
Working DEMO HERE
You could probably make it work with focusing the body on window load with document.body.focus() and attaching an event listener like this:
window.onload = function() {
document.body.focus();
document.addEventListener("keydown", keyDownFunction, false);
};
function keyDownFunction(event) {
if(event.keyCode == 72 && (event.metaKey == true)) {
alert("You hit the right keys.");
}
}
This question already has answers here:
How to prevent closing browser window?
(4 answers)
Closed 8 years ago.
I am trying to implement the functionality to confirm whether "Leaving the page" whenever the user tries to close the browser.
As of now i have implemented,
function closeIt(e) {
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
}
window.onbeforeunload = closeIt;
This works fine for closing the browser, but instead works for all the links in the page aswell, as there is condition to identify what is causing the onbeforeunload event.
Can anyone help me identify them.
Thanks in advance.
Referring to various articles and doing some trial and errors, finally developed this idea which works perfectly for me just the way i wanted it to happen. The logic was quiet simpler it implement as well The idea was to detect the unload event that is triggered by closing the browser. In that case, the mouse will be out of the window, pointing out at the Close('X') button.
$(window).on('mouseover', (function () {
window.onbeforeunload = null;
}));
$(window).on('mouseout', (function () {
window.onbeforeunload = ConfirmLeave;
}));
function ConfirmLeave() {
return "";
}
//Edit start
var prevKey=""
$(document).keydown(function (e) {
if (e.key=="F5") {
window.onbeforeunload = ConfirmLeave;
}
else if (e.key.toUpperCase() == "W" && prevKey == "CONTROL") {
window.onbeforeunload = ConfirmLeave;
}
else if (e.key.toUpperCase() == "R" && prevKey == "CONTROL") {
window.onbeforeunload = ConfirmLeave;
}
else if (e.key.toUpperCase() == "F4" && (prevKey == "ALT" || prevKey == "CONTROL")) {
window.onbeforeunload = ConfirmLeave;
}
prevKey = e.key.toUpperCase();
//Edit End
The ConfirmLeave function will give the pop up default message, it case there is any need to customize the message, return the text to be displayed instead of empty string.
Please note that the e.key returns undefined in some versions of chrome, so its better to use e.keyCode for key values and refer to http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes for values
I have a problem I can't seem to sort out.
I have a form with a custom styled button (input type=button). When typing in the text field, I want people to be able to press the TAB key and go to the button. However, it won't use a tab-index so my solution was to highlight the label and change the CSS to give the button a new border color. However, the border color will not change on keypress in any browser other than Firefox.
Here is what I have:
$(function() {
$("#email").bind("keypress", function(e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
The first enter keypress is to serialize and email the form and all.
I can't seem to get it to work for the life of me. What am I doing wrong? Is there a better solution to what I'm trying to accomplish?
Thanks for taking the time,
Armik
Use keydown instead, for me that works (see demo: http://jsfiddle.net/npGtX/2/)
$(function () {
$("#email").bind("keydown", function (e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
Also I found this: Suppressing keyPress for non-character keys?
keypress is not necessarily triggered when the keypress is not a
character. So the browser may not trigger an event on backspace, F1,
the down key, etc.
You can use the keyup event and event object's which property, jQuery normalizes the which property and it's cross-browser:
$(function() {
$("#email").bind("keyup", function(e) {
if (e.which == 13) {
send();
return false;
};
if (e.which == 9) {
$("#submit_btn").toggleClass('submit1 submit1after');
};
});
};
$(function() {
$("#email").keypress(function(e) {
if (e.keyCode == 13 || e.which== 13) {
send();
return false;
};
if (e.keyCode == 9 || e.which== 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
I would like to simulate the user pressing tab then enter when they press enter. I know this sounds bad, but I have an asp.net web application that will only allow me to have one form with runat="server" on it so when the user hits return the main form gets submitted. I have another textbox on the page though (that ideally should have it's own form but can't because it is asp), and when enter is hit from there obviously the main form is submitted. The simplest way I could think is to simulate tab then enter using javascript, but I have been unsuccessful in that. I am welcome to any other solutions to this problem. So far I have simulated pressing tab, but I don't know how to simulate more than one keypress though.
Here is the code I have so far, I imagine return 9; needs to be replaced with something else. JQuery will also do.
function suppressEnter (e) {
var keyPressed;
if (window.event) { keyPressed = window.event.keyCode } // IE
else if (e) { keyPressed = e.which }; // Netscape
if (keyPressed == 13) {
return 9;
}
else {
return true;
}
}
EDIT: return 9 + 13; works in chrome, but not IE
Something like this would work:
function keyPress(e) {
if (e.which == 13) {
$(document).trigger(jQuery.Event('keydown', {which: 9}));
// do something
alert('Enter')
}
if (e.which == 9) {
// do something
alert('Tab');
}
};
$(document).bind("keydown", keyPress);
I've coded it up in a fiddle - http://jsfiddle.net/FAe6U/
Also With regards to #nnnnnn comment:
It seems to me you should just code that directly rather than trying
to simulate keystrokes.
Try this:
var tabPress;
function keyPress(e) {
if (e.which == 13) {
if (tabPress == 1){
e.preventDefault();
alert('tab and enter');
}
else{e.preventDefault(); alert('enter')}
}
else if (e.which == 9) {
e.preventDefault();
tabPress = 1;
};
};
function keyRelease(){tabPress = 0;}
$(document).bind("keydown", keyPress);
$(document).bind("keyup", keyRelease);
I've coded it up in a fiddle - http://jsfiddle.net/f4Ybn/