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
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!
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! :)
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>
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.
}
};
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.