jQuery: How to use modifier keys on form submit?

Question

Say I have a form that looks like this:

[ Animal name input field ] Add button

If I type a name and hit enter, an animal with the given name is added to a table. Works fine. What I would like now is to call the current way of working "quick add" and add a new feature called "slow add", which I am not quite sure how to do. Basically what I want is that if for example the shift key is held down when enter or the button is clicked, I want the form submit method to do something slightly different. In my case I want it to open up a form where more details on the animal can be added before it is added to the table.

Problem is I'm not quite sure how to do this. I have tried add a FireBug console.info(eventData) in my current submit function and I have found that the eventData contains an altKey, shiftKey and controlKey property, but they are always undefined even when I hold those keys down.

So, does anyone know how I can do something special in my submit handler when certain modifier keys were pressed when the form was submitted?

---

Temporary solution

Ended up ignoring the submit-button-shift-click-feature and instead just have the quick add feature as shift-enter-in-input-fields. Implemented it something like this:

$('#new-task')
    .submit(onNewAnimal)
    .keypress(onNewAnimal);


function onNewAnimal(event)
{
    if(event.type == 'keypress' && event.which != 13)
        return true;

    if(event.shiftKey)
    {
        // Quick add
    }
    else
    {
        // Open slow add dialog
    }

    return false;
}

Still curious if there is a better way, but until then, this is what I have. Maybe it can help someone else as well :)

Answer 1

You may get shift pressed by $(document).keyup and $(document).keydown events. For example my code for control key is

$(document).keyup(function (e) {
    if (e.which == 17) $.isCtrl=false;
}).keydown(function (e) {
    if (e.which == 17) $.isCtrl=true;
});

And just check

if ($.isCtrl) { ... }

in your handler

Answer 2

There is easier way. On every keydown you have built in event variable:

    {
originalEvent: [object KeyboardEvent],
type: keydown,
timeStamp: 1277147610854,
jQuery1277147575359: true,
which: 65,
wheelDelta: undefined,
view: [object DOMWindow],
toElement: undefined,
target: ,
srcElement: ,
shiftKey: false,
screenY: undefined,
screenX: undefined,
relatedTarget: undefined,
relatedNode: undefined,
prevValue: undefined,
pageY: 0,
pageX: 0,
originalTarget: undefined,
offsetY: undefined,
offsetX: undefined,
newValue: undefined,
metaKey: false,
layerY: 0,
layerX: 0,
keyCode: 65,
handler: function (event) {
  if (event.keyCode == '13') {
     event.preventDefault();
   }
   xTriggered++;
   var msg = 'Handler for .keydown() called ' + xTriggered + ' time(s).';
  $.print(msg, 'html');
  $.print(event);
},
fromElement: undefined,
eventPhase: 2,
detail: 0,
data: undefined,
currentTarget: ,
ctrlKey: false,
clientY: undefined,
clientX: undefined,
charCode: 0,
cancelable: true,
button: undefined,
bubbles: true,
attrName: undefined,
attrChange: undefined,
altKey: false,
handleObj: [object Object],
preventDefault: function (){this.isDefaultPrevented=Z;var a=this.originalEvent;if(a){a.preventDefault&&a.preventDefault();a.returnValue=false}},
stopPropagation: function (){this.isPropagationStopped=Z;var a=this.originalEvent;if(a){a.stopPropagation&&a.stopPropagation();a.cancelBubble=true}},
stopImmediatePropagation: function (){this.isImmediatePropagationStopped=Z;this.stopPropagation()},
isDefaultPrevented: function Y(){return false},
isPropagationStopped: function Y(){return false},
isImmediatePropagationStopped: function Y(){return false}
}

altKey: false, AND: ctrlKey: false,