jQuery: как использовать клавиши-модификаторы при отправке формы?

Question

Скажем, у меня есть форма, которая выглядит следующим образом:

[ Animal name input field ] Добавить кнопку

Если я наберу имя и нажму Enterживотное с данным именем добавляется в таблицу.Работает отлично.Теперь я хотел бы назвать текущий способ работы «быстрое добавление» и добавить новую функцию «медленное добавление», что я не совсем уверен, как это сделать.По сути, я хочу, чтобы, например, когда клавиша Shift удерживалась при вводе или нажата кнопка, я хочу, чтобы метод отправки формы делал что-то немного другое.В моем случае я хочу, чтобы он открыл форму, в которую можно добавить дополнительные сведения о животном, прежде чем добавить его в таблицу.

Проблема в том, что я не совсем уверен, как это сделать.Я попытался добавить FireBug console.info(eventData) в мою текущую функцию отправки и обнаружил, что eventData содержит свойства altKey, shiftKey и controlKey, но они всегда не определены, даже когда я удерживаю эти клавиши.

Итак, кто-нибудь знает, как я могу сделать что-то особенное в моем обработчике отправки, когда при отправке формы были нажаты определенные клавиши-модификаторы?

---

Временное решение

Закончилось игнорирование функции submit-button-shift-click-click и вместо этого просто иметь функцию быстрого добавления как 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

Вы можете нажать shift, используя события $ (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-элемент, если хотите.Преимущество здесь в том, что вы можете в значительной степени сделать его похожим на кнопку, и вам не придется полагаться на изображения.

Объедините это с решением для нажатия клавиш, которое вы задали в своем вопросе, и вы должны получить все, что вам нужноre after.

Рабочая демонстрация здесь: http://jsfiddle.net/mkoistinen/afPHh/

Answer 3

Есть более простой способ.При каждом нажатии клавиши вы встраивали переменную события: { 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, <b>altKey: false,</b> 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, AND: ctrlKey: false,