jQuery: Comment utiliser les touches de modification du formulaire?

Question

Dire que j'ai une forme qui ressemble à ceci:

[ Animal name input field ]bouton Ajouter

Si je tape un nom et appuyez sur Entrée, un animal avec le nom donné est ajouté à une table. Fonctionne bien. Ce que je voudrais maintenant, c'est appeler la façon actuelle de travailler "ajouter rapidement" et ajouter une nouvelle fonctionnalité appelée "ajout lent", que je ne suis pas sûr de savoir comment faire. Fondamentalement, ce que je veux, c'est que si, par exemple, la touche majuscule est maintenue enfoncée lorsque vous entrez ou que vous cliquez sur le bouton, je veux que la méthode de soumission de formulaire fasse quelque chose de légèrement différent. Dans mon cas, je veux qu'il ouvre un formulaire où plus de détails sur l'animal peuvent être ajoutés avant qu'il ne soit ajouté à la table.

Le problème est que je ne suis pas sûr de savoir comment faire cela. J'ai essayé d'ajouter un FireBug console.info(eventData) dans ma fonction actuelle de soumission et j'ai trouvé que le eventData contient une propriété altKey, shiftKey et controlKey, mais ils sont toujours indéfinis même si je les maintiens enfoncés. Donc, est-ce que quelqu'un sait comment je peux faire quelque chose de spécial dans mon gestionnaire de soumission lorsque certaines touches de modification ont été pressées lorsque le formulaire a été soumis?

---

solution temporaire

Nous avons fini en ignorant le soumettre bouton-shift-clic-fonction et au lieu simplement que la fonction d'ajout rapide comme maj-entrée en entrée des champs. Mis en œuvre quelque chose comme ceci:

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

Toujours curieux de savoir s'il y a une meilleure façon, mais jusque-là, c'est ce que j'ai. Peut-être que cela peut aussi aider quelqu'un d'autre :)

Answer 1

Vous pouvez obtenir un décalage par les événements $ (document) .keyup et $ (document) .keydown. Par exemple mon code pour la clé de contrôle est

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

Et vérifier

if ($.isCtrl) { ... } 

dans votre gestionnaire

Answer 2

Il est beaucoup plus facile. Sur chaque KEYDOWN vous avez construit dans la variable d'événement:

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

Answer 3

Pour une raison quelconque, les touches de modification ne sont pas envoyés avec Transmet le formulaire ou entrée boutons, mais ils sont envoyés sur d'autres clics, y compris les entrées [type = image]. Donc, recréer votre formulaire en utilisant une entrée [type = image] où votre 'Ajouter un bouton' est maintenant. Vous pouvez également utiliser un élément A de style si vous le souhaitez. L'avantage ici est que vous pouvez presque faire ressembler à un bouton et ne pas avoir à compter sur des images. Combinez cela avec la solution de touches que vous avez posée dans votre question et vous devriez obtenir tout ce que vous cherchez.

travail démo ici: http://jsfiddle.net/mkoistinen/afPHh/