Question

说我有一个看起来像这样的表格：

[ Animal name input field ] 添加按钮

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

问题是我不太清楚如何做到这一点。我尝试在当前的提交函数中添加一个FireBug console.info(eventData)，我发现eventData包含一个altKey，shiftKey和controlKey属性，但即使我按下这些键，它们也总是未定义。 / p>

那么，在提交表单时按下某些修饰键时，是否有人知道如何在提交处理程序中执行某些特殊操作？

临时解决方案

结束忽略submit-button-shift-click-feature，而只是将快速添加功能作为shift-enter-in-input-fields。实现了这样的事情：

$('#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事件按下。例如，我的控制键代码是

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

然后检查

if ($.isCtrl) { ... }

你的处理程序中的

Answer 2

出于某种原因，修改键不会与表单提交或输入按钮一起发送，但它们会在其他“点击”上发送，包括输入[type = image]。因此，使用输入[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：false， 和： ctrlKey：false，

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

3 个答案: