Javascript Detect Control Key Held on Mouseup

Question

I've searched a good deal, and can't seem to find a satisfactory solution. I hope someone can help.

While I am using jQuery, I am also writing many thousands of lines of Javascript. So a "pure" javascript solution is just fine.

I'm trying to determine if the control key is physically held down on a mouseup event. That's it; there are no other preconditions. Does anyone know how to do this reliably, cross-browser?

I've tried storing this in a state variable by noting when the key is pressed and released:

// BEGIN store control key status in hash_state
$().bind('keydown','ctrl',function( arg_obj_e ){
  hash_state.sw_ctrldn = true;
  console.debug( hash_state.sw_ctrldn );
});
$().bind('keyup','ctrl',function( arg_obj_e ){
  hash_state.sw_ctrldn = false;
  console.debug( hash_state.sw_ctrldn );
});
// END store control key status in hash_state

However, this really doesn't work. If you test this using firebug and watch the console, you will see that auto-repeat seems to happen, and the value toggles.

I inspected the mouseup event to see if there is anything useful there, but to no avail:

var debugEvent = function( arg_obj_e ){
  var str = '';
  for ( var attr in arg_obj_e ){
    str += attr + ': ' + arg_obj_e[attr] + '\n';
  }
  console.debug(str);
}

Any help would be appreciated.

Answer 1

You can use the event.ctrlKey property.

$(function(){
  $('#elementId').mouseup(function(e){
    var isCtrlPressed = e.ctrlKey;
    // true or false whether ctrl is pressed or not 
  });
});

Check a running example here.