jQuery：如何在表单提交上使用修饰键？

Question

假设我有一个如下所示的表单：

[ Animal name input field ] 添加按钮

如果我输入名称并按 Enter 键，具有给定名称的动物将添加到表格中。工作正常。我现在想将当前的工作方式称为“快速添加”并添加一个名为“慢速添加”的新功能，我不太确定该怎么做。基本上我想要的是，例如，如果在输入或单击按钮时按住 shift 键，我希望表单提交方法做一些稍微不同的事情。在我的例子中，我希望它打开一个表单，可以在将动物添加到表格之前添加更多关于动物的详细信息。

问题是我不太确定该怎么做。我尝试在我当前的提交函数中添加一个 FireBug console.info(eventData)，我发现 eventData 包含一个 altKey、shiftKey 和 controlKey 属性，但即使我按住这些键，它们也总是未定义。

那么，有谁知道当提交表单时按下某些修饰键时，我如何在提交处理程序中做一些特别的事情？

---

临时解决方案

最终忽略了提交按钮-移位-点击-功能，而只是将快速添加功能作为移位-输入-输入-字段。实现它是这样的：

$('#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;
}

仍然好奇是否有更好的方法，但在那之前，这就是我所拥有的。也许它也可以帮助其他人:)

Answer 1

$(document).keyup 和 $(document).keydown 事件可能会按下 shift。例如我的控制键代码是

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

然后检查一下

if ($.isCtrl) { ... }

在你的处理程序中

Answer 2

由于某种原因，修饰键不会随表单提交或输入按钮一起发送，而是在其他“点击”时发送，包括 input[type=image]。因此，使用“添加按钮”现在所在的 input[type=image] 重新创建表单。如果您愿意，也可以只使用样式化的 A 元素。这样做的好处是您几乎可以让它看起来像一个按钮，而不必依赖图像。

将此与您在问题中提出的按键解决方案结合起来，您应该得到您所追求的全部内容。

这里的工作演示： http://jsfiddle.net/mkoistinen/afPHh/

Answer 3

有更简单的方法。 在每个 keydown 上，您都内置了事件变量：

    {
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：假， 和： ctrlKey: 假，