jQuery: Wie Zusatztasten auf Formular verwenden einreichen?

Question

sagen, dass ich eine Form haben, die wie folgt aussieht:

[ Animal name input field ]Taste

hinzufügen Wenn ich einen Namen eingeben und drücken Sie die Eingabetaste, ein Tier mit dem angegebenen Namen wird zu einer Tabelle hinzugefügt. Funktioniert gut. Was würde Ich mag jetzt die aktuelle Arbeitsweise „Quick add“ nennen und ein neues Feature namens „slow add“ hinzufügen, die ich bin mir nicht ganz sicher, wie zu tun ist. Im Grunde, was ich will, ist, dass, wenn beispielsweise die Shift-Taste gedrückt gehalten wird, wenn Sie sich an oder die Schaltfläche geklickt wird, möchte ich die Form Methode einreicht etwas etwas anderes zu tun. In meinem Fall möchte ich, dass es ein Formular öffnet, in dem mehr Details zum Tier hinzugefügt werden können, bevor es zum Tisch hinzugefügt wird.

Problem ist, ich bin nicht ganz sicher, wie dies zu tun. Ich habe versucht, einen FireBug console.info(eventData) in meiner jetzigen Funktion einreichen hinzufügen und ich habe festgestellt, dass die eventData enthält eine altKey, shiftKey und controlKey Eigenschaft, aber sie sind immer undefiniert, auch wenn ich die Tasten gedrückt halten.

So, weiß jemand, wie ich etwas Besonderes in meinem einreichen Handler tun kann, wenn bestimmte Zusatztasten gedrückt wurden, wenn das Formular abgeschickt wurde?

---

temporäre Lösung

die Absende-Button-Shift-Klick-Funktion zu ignorieren Ended und stattdessen nur noch die schnelle Add-Funktion als shift-enter-in-Input-Felder. Umgesetzt es so etwas wie diese:

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

noch gespannt, ob es eine bessere Art und Weise, aber bis dahin, das ist, was ich habe. Vielleicht kann es jemand anderem auch helfen :)

Answer 1

Sie können Shift von $ (Dokument) .keyup und $ (Dokument) .keydown Ereignisse gedrückt werden. Zum Beispiel mein Code für Steuerschlüssel ist

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

Und überprüfen Sie nur

if ($.isCtrl) { ... } 

in Ihrem Handler

Answer 2

Es ist einfacher Art und Weise. Auf jeden keyDown Sie in Ereignisvariable aufgebaut haben:

 
    { 
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, UND: ctrlKey: false,

Answer 3

Aus irgendeinem Grund werden die Zusatztasten nicht mit Formular gesendet einreicht oder Eingabe Tasten, aber sie werden auf anderen 'Klicks', einschließlich Eingabe [Typ = Bild] 's gesendet. Also, erstellen Sie Ihr Formular neu, indem Sie eine Eingabe [type = image] verwenden, wo Ihre 'Schaltfläche hinzufügen' jetzt ist. Sie könnten auch einfach ein gestyltes A-Element verwenden, wenn Sie möchten. Der Vorteil ist, dass Sie es so aussehen lassen können, als wäre es ein Knopf und sich nicht auf Bilder verlassen müssen.

Kombinieren Sie dies mit der Tastendruck Lösung, die Sie in Ihrer Frage gestellt haben, und Sie sollten das Ganze bekommen, wonach Sie suchen.

Arbeiten Demo hier: http://jsfiddle.net/mkoistinen/afPHh/