how to capture "ESC" from an iframe? - javascript

i need to capture esc key to close my open div.The div contents an iframe. it's works when i open the div and soon press esc to close it.But when i clicked the iframe,and pressed key esc,it's no more work for me.becuse it only capture the current window(at this point will be the iframe window),how can i fix it ?
Here is my parent window's code:
window.onkeydown = function(e) {
var e = e || window.event;
if (e.keyCode === 27) {
_this.closeDemo();
}
}

How about adding a onkeydown handler inside the iframe:
window.onkeydown = function(e) {
var e = e || window.event;
if (e.keyCode === 27) {
parent.closeDemo();
}
}

Related

mdSidebar by pressing esc button is toggle in Angular Material. How to prevent this?

document.onkeydown = function(event) {
event = event || window.event;
var isEscape = false;
if ("key" in event) {
isEscape = (event.key == "Escape" || event.key == "Esc");
} else {
isEscape = (event.keyCode == 27);
}
if (isEscape) {
event.preventDefault();
console.log(123213123);
}
};
This code is look on state of button, but it is native JS and how I could make this functionality works? Because I still don't have a solve. What should I wrote in last "if" state to prevent hiding of sidebar?
Thank you all for help!

Trying to suppress the backspace and F5 button is also suppressing the lower case "t" button

I am trying to stop the user from navigating away from the page while they are inputting some text. I am doing this by suppressing the F5 button and the backspace button, which goes back.
Now I notice that I cannot press t. When I check the logs, it's because t is giving me a key event code of 116 which is the same as the F5 button.
How can I get around this?
Here is a code snippet.
function suppressBackspaceAndF5(evt) {
evt = evt || window.event;
var target = evt.target || evt.srcElement;
// when I release "t" - the code is 116, which is the same as the refresh code.
console.log(evt.keyCode);
if ((evt.keyCode == 8 &&
!/input|textarea/i.test(target.nodeName)) ||
evt.keyCode == 116) {
return false;
}
}
document.onkeydown = suppressBackspaceAndF5;
document.onkeypress = suppressBackspaceAndF5;
<input></input>
I found this related Stackoverflow question which seems to contains your answer. Posting here specifically as a reference:
capturing f5 keypress event in javascript using window.event.keyCode in window.onbeforeunload event is always 0 and not 116
Excerpt: by SO user Sim_ba
Dont use e.keyCode == 166 use e.code == 'F5' instead.
function fkey(e){
e = e || window.event;
if( wasPressed ) return;
function fkey(e){
e = e || window.event;
if (e.code === 'F5') {
alert("f5 pressed");
wasPressed = true;
}else {
alert("Window closed");
}
}
This is because the 't' and 'F5' both use the keycode number 116. [...]
Go vote Sim_ba up as well! :)

Javascript Open all links on _blank Except

I am using this code below to open all links on _blank pages and it works great!
I just have one problem.
How can I make it so a specific link or class is ignored by the script?
Here's the code:
<script>
document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.tagName == 'A') {
window.open(element.href, "_blank", "location=yes");
return false; // prevent default action and stop event propagation
}
};
</script>
To ignore specific classes, use the below:
document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.tagName == 'A' && !element.classList.contains('noBlank')) {
window.open(element.href, "_blank", "location=yes");
return false; // prevent default action and stop event propagation
}
};
<p>BBC should not be _blank</p>
Google
<br />
Yahoo
<br />
<a class="noBlank" href="http://www.bbc.co.uk">BBC</a>

Triggering jQuery("#collapseMenu").hide(); on pressing Esc key

As mentioned in WA-ARIA 1.0 keyboard interaction, I need to implement the following behaviour:
When a submenu is open and focus is on a menu item in that submenu:
Escape or the Left Arrow key closes the submenu and returns focus to the parent menu item.
To achieve this, I added the following rudimentary javascript code to my page:
if (e.keyCode == 27) {
element = document.getElementById("spanID");
menuElement = document.getElementById("bigMenu");
if (element.className == "glyphicon glyphicon-menu-down") {
element.className = "glyphicon glyphicon-menu-right";
jQuery("#collapseMenu").hide();
menuElement.setAttribute('aria-expanded', false);
sessionStorage.setItem("expand", false);
}
}
That did not work, so it's not the correct way to go about things. Could someone point what is it that I am doing incorrectly.
if you're already using jQuery go all the way.
$(document).on('keypress', function(e){
if (e.keyCode == 27 || e.keyCode == 37) { // escape or left key
var element = $("#spanID"),
menuElement = $("#bigMenu");
if (element.hasClass('glyphicon') && element.hasClass('glyphicon-menu-down')) {
element.removeClass('glyphicon-menu-down').addClass('glyphicon-menu-right');
$("#collapseMenu").hide();
menuElement.attr('aria-expanded', 'false');
sessionStorage.setItem("expand", false);
}
}
});
Try this
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
alert("Escape");
// Here is your code for hiding menu.
}
};

Do not scroll page down when spacebar is clicked?

As you may know some browsers have this default functionality to scroll page down when spacebar is clicked. I usually like this feature, but due to nature of my website I need to get rid of it.
I've been using
window.onkeydown = function(e) {
return !(e.keyCode == 32);
};
which eats all spacebar functionality and gets the job done, however if user is typing in a comment or a search query and they press spacebar no space is added in a text as this functionality has been eaten up.
So is there a way to disable just the scrolling part and leave all other functionality as it is?
window.onkeydown = function(e) {
return !(e.keyCode == 32 && (e.target.type != 'text' && e.target.type != 'textarea'));
};
Maybe try this:
window.onkeydown = function(e) {
if(e.keyCode == 32 && e.target.nodeName.toUpperCase() === "BODY") e.preventDefault();
};
Probably need to equalise for IE:
window.onkeydown = function(e) {
var evt = e || window.event;
var elem = evt.target || evt.srcElement;
if(e.keyCode == 32 && elem.nodeName.toUpperCase() === "BODY") {
evt.preventDefault();
return false;
}
};
(untested)
But you would need to attach an event to/within each iframe, using iframeref.contentWindow.
After the page and iframes have loaded you could loop through the frames[] collection.

Categories

Resources