jQuery: Come utilizzare i tasti modificatori sul modulo di invio?

Question

Dire che ho una forma che assomiglia a questo:

[ Animal name input field ]pulsante Aggiungi

Se digito un nome e premere Invio, un animale con il nome dato si aggiunge a una tabella. Funziona bene. Quello che vorrei ora è chiamare l'attuale modalità di lavoro "quick add" e aggiungere una nuova funzionalità chiamata "slow add", che non sono abbastanza sicuro di come fare. Fondamentalmente quello che voglio è che se per esempio il tasto Maiusc viene tenuto premuto quando si entra o si fa clic sul pulsante, voglio che il metodo di invio del modulo faccia qualcosa di leggermente diverso. Nel mio caso, voglio che apra un modulo in cui è possibile aggiungere ulteriori dettagli sull'animale prima che venga aggiunto al tavolo.

Problema è che non sono abbastanza sicuro di come farlo. Ho provato ad aggiungere un FireBug console.info(eventData) nella mia attuale funzione di invio e ho trovato che lo eventData contiene una proprietà altKey, shiftKey e controlKey, ma sono sempre indefiniti anche quando tengo quei tasti premuti.

Quindi, qualcuno sa come posso fare qualcosa di speciale nel mio gestore di invio quando alcuni tasti modificatori sono stati premuti quando il modulo è stato inviato?

---

soluzione temporanea

finito per ignorare il pulsante-shift-click-funzione di presentare-e invece solo hanno la caratteristica aggiunta veloce come shift-enter-a-input-campi. Attuato qualcosa di simile:

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

Ancora curioso di sapere se c'è un modo migliore, ma fino ad allora, questo è quello che ho. Forse può aiutare qualcun altro :)

Answer 1

È possibile ottenere il tasto premuto premendo $ (documento) .keyup e $ (documento) .keydown. Per esempio il mio codice per la chiave di controllo è

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

E basta controllare

if ($.isCtrl) { ... } 

nel gestore

Answer 2

Non c'è modo più semplice. Su ogni keyDown avete costruito in variabile evento:

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

Answer 3

Per qualche ragione, i tasti di modifica non vengono inviate con modulo sottopone o ingresso pulsanti, ma vengono inviati su altri "clic", incluso l'input [type = image]. Quindi, ricrea il tuo modulo usando un input [type = image] dove è ora il tuo 'Aggiungi Button'. Potresti anche usare un elemento A con stile se lo desideri. Il vantaggio qui è che puoi praticamente farlo apparire come un pulsante e non dover fare affidamento sulle immagini.

Combina questo con la soluzione per la pressione dei tasti che hai posto nella tua domanda e dovresti ottenere tutto ciò che cerchi.demo

Lavorare qui: http://jsfiddle.net/mkoistinen/afPHh/