I'm developing a web app which listens for combinations of keydown events, e.g. CTRL + B.
My problem is listening for CTRL + ArrowKey on mac. This works fine on PC, but on Mac this is a shortcut to switch between desktops, so the second keydown event (arrow key) does not trigger.
Is there any way to override the mac os CTRL+Arrow shortcut, or listen for this combination in javascript on mac?
document.onkeydown = listenForSecondKey;
function listenForSecondKey(event){
console.log(event.key);
event.preventDefault ? event.preventDefault() : (event.returnValue=false);
if ((holdDown1 == true)&&(holdDown2 == true)){
if (event.which == push){
document.removeEventListener("keydown", keyGoingDown);
if (postcondition){
showPostCondition();
}
else{
killTable();
correctAnswerSubmitted();
}
}
else{
killTable();
incorrectAnswerSubmitted();
}
holdDown1 = false;
holdDown2 = false;
}
}
function keyGoingDown(event){
event.preventDefault ? event.preventDefault() : (event.returnValue=false);
if (event.key == hold1) {
holdDown1 = true;
}
else if (event.key == hold2){
if (holdDown1 == true){
holdDown2 = true;
}
}
else{
//Wrong, but also shouldn't detect push down
}
}
document.addEventListener("keydown", keyGoingDown);
I think this might give an idea.
document.addEventListener('keydown', (e) => {
if ( e.key === 'ArrowLeft' ) {
e.preventDefault() // Stop other operations
}
})
Related
I am trying to stop a keydown event from repeating for a game. I am unable to use libraries due to it being part of a school project. I have tried most of the answers I can access but they don't work for my code, I also can't use MDN because it's blocked. Here is the code
window.addEventListener("keydown", function (e){
if (e.keyCode == 32) {
accelerateBy = -0.5
accelerate()
}
});
You may have to use some variable to save the state of you key. Here's an example:
let isKeyDown = false;
document.addEventListener("keydown", (event) => {
if (event.keyCode == 32) {
if (isKeyDown) { return; } // If key was already down, don't do anything
isKeyDown = true;
// do your stuff here
}
});
document.addEventListener("keyup", (event) => {
if (event.keyCode == 32) {
isKeyDown = false;
}
});
I need to track the click on capslock and then the keyboard shortcut ctrl + alt, that is, first click on capslock and then on the keyboard shortcut here is an example
if (e.code == "CapsLock") {
if (e.ctrlKey && e.keyCode == 18) {
alert();
}
}
but this code does not work
I use a function like this:
document.addEventListener("keydown", function (e) {
var caps = e.getModifierState && e.getModifierState('CapsLock'); // true if pressed, false if released
document.onkeyup = function(event) {
if(caps === true){
/** Validate keys are to be processed */
var keycode = event.which;
// works off course only if ctrl key is kept pressed during key stroke = normal behavior in most OS
// Should it work like a ctrl-Lock function you have to work with a state variable
if ((event.ctrlKey === true) && (keycode === 18)) {
alert();
}
else{
/** Let it happen, don't do anything */
return;
}
}
};
});
I need to disable shift keypress event in my site by using JavaScript or any other method.
Below is my code:
$(document).ready(function() {
document.onkeydown = checkKeycode
function checkKeycode(e) {
var keycode;
if (window.event) {
keycode = window.event.keyCode;
}
else if (e) {
keycode = e.which;
}
//alert(keycode);
if (keycode == 16) {
alert(keycode);
return false;
}
}
});
// bind an event listener to the keydown event on the window
window.addEventListener('keydown', function (event) {
// if the keyCode is 16 ( shift key was pressed )
if (event.keyCode === 16) {
// prevent default behaviour
event.preventDefault();
return false;
}
});
http://api.jquery.com/keypress/
In addition, modifier keys (such as Shift) trigger keydown events but not keypress events.
Try this
$('#target').keydown(function(event) {
if (event.shiftKey) {
event.preventDefault();
}
}
document.onkeydown = function (e) {
var e = e || event;
if (e.shiftKey === true) {
return false;
}
};
You may try this:
jQuery(document).keydown(function(e){
if(e.which === 16) {
e.preventDefault();
return;
}
console.log(e.which);
});
See demo.
Use Firebug and check console output.
Possible Duplicate:
Which keycode for escape key with jQuery
How to detect escape key press in IE, Firefox and Chrome?
Below code works in IE and alerts 27, but in Firefox it alerts 0
$('body').keypress(function(e){
alert(e.which);
if(e.which == 27){
// Close my modal window
}
});
Note: keyCode is becoming deprecated, use key instead.
function keyPress (e) {
if(e.key === "Escape") {
// write your logic here.
}
}
Code Snippet:
var msg = document.getElementById('state-msg');
document.body.addEventListener('keypress', function(e) {
if (e.key == "Escape") {
msg.textContent += 'Escape pressed:'
}
});
Press ESC key <span id="state-msg"></span>
keyCode is becoming deprecated
It seems keydown and keyup work, even though keypress may not
$(document).keyup(function(e) {
if (e.key === "Escape") { // escape key maps to keycode `27`
// <DO YOUR WORK HERE>
}
});
Which keycode for escape key with jQuery
The keydown event will work fine for Escape and has the benefit of allowing you to use keyCode in all browsers. Also, you need to attach the listener to document rather than the body.
Update May 2016
keyCode is now in the process of being deprecated and most modern browsers offer the key property now, although you'll still need a fallback for decent browser support for now (at time of writing the current releases of Chrome and Safari don't support it).
Update September 2018
evt.key is now supported by all modern browsers.
document.onkeydown = function(evt) {
evt = evt || window.event;
var isEscape = false;
if ("key" in evt) {
isEscape = (evt.key === "Escape" || evt.key === "Esc");
} else {
isEscape = (evt.keyCode === 27);
}
if (isEscape) {
alert("Escape");
}
};
Click me then press the Escape key
Using JavaScript you can do check working jsfiddle
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
alert('Esc key pressed.');
}
};
Using jQuery you can do check working jsfiddle
jQuery(document).on('keyup',function(evt) {
if (evt.keyCode == 27) {
alert('Esc key pressed.');
}
});
check for keyCode && which & keyup || keydown
$(document).keydown(function(e){
var code = e.keyCode || e.which;
alert(code);
});
Pure JS
you can attach a listener to keyUp event for the document.
Also, if you want to make sure, any other key is not pressed along with Esc key, you can use values of ctrlKey, altKey, and shifkey.
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
//if esc key was not pressed in combination with ctrl or alt or shift
const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
if (isNotCombinedKey) {
console.log('Escape key was pressed with out any group keys')
}
}
});
pure JS (no JQuery)
document.addEventListener('keydown', function(e) {
if(e.keyCode == 27){
//add your code here
}
});
Below is the code that not only disables the ESC key but also checks the condition where it is pressed and depending on the situation, it will do the action or not.
In this example,
e.preventDefault();
will disable the ESC key-press action.
You may do anything like to hide a div with this:
document.getElementById('myDivId').style.display = 'none';
Where the ESC key pressed is also taken into consideration:
(e.target.nodeName=='BODY')
You may remove this if condition part if you like to apply to this to all. Or you may target INPUT here to only apply this action when the cursor is in input box.
window.addEventListener('keydown', function(e){
if((e.key=='Escape'||e.key=='Esc'||e.keyCode==27) && (e.target.nodeName=='BODY')){
e.preventDefault();
return false;
}
}, true);
Best way is to make function for this
FUNCTION:
$.fn.escape = function (callback) {
return this.each(function () {
$(document).on("keydown", this, function (e) {
var keycode = ((typeof e.keyCode !='undefined' && e.keyCode) ? e.keyCode : e.which);
if (keycode === 27) {
callback.call(this, e);
};
});
});
};
EXAMPLE:
$("#my-div").escape(function () {
alert('Escape!');
})
On Firefox 78 use this ("keypress" doesn't work for Escape key):
function keyPress (e)(){
if (e.key == "Escape"){
//do something here
}
document.addEventListener("keyup", keyPress);
i think the simplest way is vanilla javascript:
document.onkeyup = function(event) {
if (event.keyCode === 27){
//do something here
}
}
Updated: Changed key => keyCode
I know this is not the best thing to do in view of accessibility, but I have a genuine need to disable the user from zooming onto the page using CTRL+ in IE7.
I got it working for the other browsers the following way, but IE7 seems to ignore the "return false":
$(window).keydown(function (e) {
alert('key is down'); // this fires
return false; // but this has no effect in IE7!
});
This is better and correct way:
$(document).ready(function() {
var ctrl = false;
$(document).keydown(function(e){
// disable ctrl + +/-
if(ctrl && (e.keyCode == 107 || e.keyCode == 109)) {
alert('Zoom is disabled!');
return false;
}
if(e.keyCode == 17) {
ctrl = true;
// disable ctrl + scroll
$(document).bind('scroll', function() {
if(ctrl) {
alert('Zoom is disabled!');
return false;
}
});
}
})
$(document).keyup(function(e) {
if(e.keyCode == 17) {
ctrl = false;
$(document).unbind('scroll');
}
});
});
Try attaching keydown to document instead:
$(document).keydown(function (e) {
alert('key is down');
return false;
});
This is pointless if the end user's browser already has the zoom set before visiting your page.
simple answer. for IE, you need Event.stop(e); instead of return false;
I don't have IE7 to test on ATM but this should do it
$(window).keydown(function (e) {
alert('key is down'); // this fires
e.preventDefault(); // This is a standard jQuery way of
// preventing the default action
return false; // Therefore you shouldn't need this.
});