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.
Related
I want to use shortcut to handle a task in Javascript (not JQuery or any Javascript libraries). For example, I want to use Ctrl+Q to write an alert. My issue is only to use Ctrl+Q, combination of other keys such as Ctrl+Q+other key will not handle the alert. How can I do?
document.addEventListener('keydown', function(event){
if(event.ctrlKey && event.keyCode == 81) console.log('alert');
});
I only want Ctrl+Q work, not for Ctrl+Shift+Q, Ctrl+Alt+Q, Ctrl+Q+(some key else)
Just ensure none of the other three modifiers are pressed:
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.keyCode == 81 && !(event.shiftKey || event.altKey || event.metaKey)) console.log("alert");
});
The code below should solve your problem(Updated Code):
document.addEventListener("keydown", function (event) {
var map = [];
onkeyup = function(e){
map.push(e.key);
console.log(map);
if(map.length == 2){
console.log("CTRL + Q was pressed",map.indexOf("q") > -1 && map.indexOf("Control") > -1)
}
onkeydown = function(e){
// console.log(map);
}
}
});
If any other button is pressed along with ctrl (For instance: ctrl+shift+Q or ctrl+alt+q), it returns false!! Let me know if that solves your problem. Cheers!!
You'll need to keep track of what keys are pressed with keydown and which keys are released with keyup, then, when a new key is pressed, you would check for only Ctrl and Q currently being down.
Something like this should work:
var keysPressed = [];
function onPressOrRelease(event) {
if (event.type === "keydown") {
if (!keysPressed.includes(event.keyCode))
keysPressed.push(event.keyCode)
} else if (event.type === "keyup")
keysPressed.splice(keysPressed.indexOf(event.keyCode), 1);
let ctrlQPressed = keysPressed.includes(81) && keysPressed.includes(17) && !keysPressed.some(a => a !== 81 && a !== 17)
if (ctrlQPressed)
console.log("pressed");
}
document.addEventListener("keydown", onPressOrRelease);
document.addEventListener("keyup", onPressOrRelease);
You'll want to make sure keys don't get added multiple times and may want to clear the array on focus loss (since using control it may lose focus when releasing)
I am working on a project in which I need to intercept a paste action that is being performed on a div (must be a div, can't be a text box). Right now I am binding the event after the div has focus (you've clicked on the div):
$('#result').unbind().click(function () {
$(this).focus();
$('#result').unbind().on('paste', function () {
console.log('paste behaviour detected!');
});
}); //NOTE: I have also tried. result.bind, result.unbind.bind, onpast="function()"
//(in the HTML), and a couple of other things.
I have also tried changing around the flow of the class (no change).
One more thing. I am using chrome/opera to develop. When I test this on firefox it works just fine. Is there anything I can try to fix this or did I stumble upon a bug?
NOTE: I am leaving out info about the project for simplicity, but if you need more context I can provide it.
Edit: I am pasting in to a div so there is no rightclick>paste button. This is solely with ctrl+v.
You can detect the combination of ctrl/cmd + v keys as well:
$(document).ready(function() {
var ctrlDown = false,
ctrlKey = 17,
cmdKey = 91,
vKey = 86;
$(document).keydown(function(e) {
if (e.keyCode == ctrlKey || e.keyCode == cmdKey) {
ctrlDown = true;
}
}).keyup(function(e) {
if (e.keyCode == ctrlKey || e.keyCode == cmdKey) {
ctrlDown = false;
}
});
$(document).keydown(function(e) {
if (ctrlDown && e.keyCode == vKey) {
alert('PASTE DETECTED');
}
});
});
});
https://jsfiddle.net/ufskbo0a/1/
You can use the clipboardData api in most browsers to get the data:
window.clipboardData.getData('Text')
http://caniuse.com/#search=clipboardData
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!
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.
}
};
Simply I have a js script that change the page with left and right arrows, but how to stop that if a specific textarea is selected ?
This is my js to change the page
$(document).keydown(function(event) {
if(event.keyCode === 37) {
window.location = "http://site.com/pics/5";
}
else if(event.keyCode === 39) {
window.location = "http://site.com/pics/7";
}
});
$('textarea').on('keypress', function(evt) {
if ((evt.keyCode === 37) || (evt.keyCode === 39)) {
console.log('stop propagation');
evt.stopPropagation();
}
});
See example fiddle: http://jsfiddle.net/GUDqV/1
Update: after OP clarification this works even on jQuery 1.2.6 on Chrome: http://jsfiddle.net/GUDqV/2/
$('textarea').bind('keyup', function(evt) {
if ((evt.keyCode === 37) || (evt.keyCode === 39)) {
console.log('stop propagation');
evt.stopPropagation();
}
});
see screenshot of this code on Chrome and jQ1.2.6
Probably the simplest approach is to factor event.target into your code, checking to see if it is the textarea:
$(document).keydown(function(event) {
if (event.target.id == "myTextArea") {
return true;
}
else if(event.keyCode === 37) {
window.location = "http://site.com/pics/5";
}
else if(event.keyCode === 39) {
window.location = "http://site.com/pics/7";
}
});
Any key events that originate from a textarea element with an id of myTextArea will then be ignored.
You can check if the textarea is in focus by doing something like:
if (document.activeElement == myTextArea) {
// Don't change the page
}
$("#mytextarea").is(":focus") This will let you know if the element is focused.
Also $(document.activeElement) will get the currently focused element.
You can check to see if your text area is focused, and disable the script that navigates when using left and right arrow keys.
A little bit of code showing what you've tried might bring in more specific responses.
Hope this helps.