JavaScript: Check if CTRL button was pressed

Question

I need to check if the CTRL button was pressed while I am clicking on a control on my html page using JavaScript.

How can I do this?

score 151 · Answer 1 · edited Feb 11 '19 at 16:58

151

Try looking in the event object.

e.g.

document.body.onclick = function (e) {
   if (e.ctrlKey) {
      alert("ctr key was pressed during the click");
   }
}

<p>Click me, and sometimes hold CTRL down!</p>

edited Feb 11 '19 at 16:58

Mikael Dúi Bolinder

2,080
2
19
44

answered Jul 24 '11 at 10:35

Charles Ma

47,141
22
87
101

3

FYI when you use this on a mac with "ctrl-click = right click" you still get the behavior of browser menu opening. – Andrew K Nov 07 '14 at 19:00
6

If you need to detect the Mac OS X's command key check the ```metaKey``` property of the event object ```e.metaKey``` – romek Apr 15 '17 at 17:46
How can you get the state of the Ctrl key being pressed or not, outside an event? The use case is setting a property of a control on asynchronous initialization depending on the state of a modifier key. – Dan Dascalescu Oct 09 '19 at 03:55
In javascript's event model you ask to check if CTRL button was down. The keypressed event is returned when a key is released again; not all browsers appear to generate such keypressed events for modifier keys like CTRL, SHIFT and others. – db-inf Nov 06 '22 at 07:49

score 7 · Answer 2 · answered Jul 16 '16 at 07:20

7

I use this and works fine

<a  href="" onclick="return Details(event)" ></a>

function Details(event) {
            if (event.ctrlKey) {
                alert('Ctrl down');
            }
}

answered Jul 16 '16 at 07:20

Arun Prasad E S

9,489
8
74
87

1

What does this add to the accepted answer? How is this answer any better, or even meaningfully different? – Dan Dascalescu Oct 09 '19 at 03:41
Different requirements like what? When this page shows up in Google searches, so do *all* answers in it, not just this one. So my question still stands. – Dan Dascalescu Oct 10 '19 at 00:06
2

This is a helpful addition to the accepted answer because it is adding the event handler from html, not from within the javascript. – cmyr Dec 26 '20 at 16:36
1

@cmyr I'd argue otherwise, setting event handlers from HTML is a security risk and should be forbidden using [CSP policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). – Ruan Mendes Feb 27 '23 at 13:06

score 6 · Answer 3 · answered Mar 21 '17 at 01:59

6

I did it using cntrlIsPressed global flag; also takes care of select all option using Control + A

// Check whether control button is pressed
$(document).keydown(function(event) {
    if (event.which == "17")
        cntrlIsPressed = true;
    else if (event.which == 65 && cntrlIsPressed) {
        // Cntrl+  A
        selectAllRows();
    }
});

$(document).keyup(function() {
    cntrlIsPressed = false;
});

var cntrlIsPressed = false;

answered Mar 21 '17 at 01:59

Sacky San

1,535
21
26

2

This is a good solution for those who want to check if CTRL is down outside of a key event handler. – Mr. TA Apr 26 '17 at 15:11
1

introducing global state like that, is not a good idea. Why would you ever want to check for that outside of event handler? – galdikas Oct 24 '18 at 09:12
2

`window.event.ctrlKey` can be used instead of this. – Mikael Dúi Bolinder Feb 11 '19 at 16:04
1

@galdikas: for example in the initialization of a control, you may want to set a different property if Ctrl was pressed (e.g. fine vs. coarse selection). – Dan Dascalescu Oct 09 '19 at 03:42
3

@MikaelDúiBolinder: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/event) advises **against** using `window.event`. – Dan Dascalescu Oct 09 '19 at 03:52
3

@Sacky: the logic of setting `cntrlIsPressed = false;` on keyup is incorrect, because the user might press Ctrl+whatever, then release the whatever key (which will generate `keyup`), and Ctrl is still down. Also, jQuery is overkill here. – Dan Dascalescu Oct 09 '19 at 03:53
@DanDascalescu instead of `which == 17`. – Mikael Dúi Bolinder Oct 09 '19 at 14:57
Downvoted for using jQuery when not necessary. Do not use it in posts that are not tagged jQuery. – Ruan Mendes Feb 27 '23 at 13:08

JavaScript: Check if CTRL button was pressed

3 Answers3

Linked

Related