Vue: Capture (Cmd + Enter) No Longer Works.

[josephjbrewer]

I just upgraded to VueJS 1.0.8 (from 0.1.2) and can no longer capture cmd + enter on the keyup event.

Is there a way to capture (cmd + enter) for mac and (control + enter) for PC?

Basically, I just want to submit a form when cmd/control + enter is pressed.

[yyx990803]

How are you doing the capture? Can you provide a repro?

[josephjbrewer]

I've tried both keyup and keydown. I created handleCmdEnter() to try and capture the key events, but on keyup, only the last key to be released triggers the event, and on keydown, two events are fired. On keyup registers the Cmd keyup, but then the enter key is not accessible.

<form v-on:submit.stop.prevent="createComment($event, $index)">
    <textarea v-on:keydown="handleCmdEnter($event)"
        class="form-control" name="comment" 
        rows="1" placeholder="Add your two cents"></textarea>
</form>

[yyx990803]

Mac Cmd key is not considered a modifier and you cannot check it on the event. Other modifier keys works properly for me. What is the JavaScript you are using? Please provide as much information as possible, preferably a live demo.

[josephjbrewer]

Thank you for responding so quickly!
I figured out a way around it. Seems to be a suitable solution.

# Add event handler
v-on:keydown="handleCmdEnter($event)"

# Method to handle key combination
handleCmdEnter: function (e) {
    if ((e.metaKey || e.ctrlKey) && e.keyCode == 13) {
        e.target.form.submit();
    }
}

The event handlers for the form submission didn't work when calling submit() directly, so I called the click event on the submit button instead.

# Modified method to trigger click event on submit button
# Event handlers for form get trigger this way
handleCmdEnter: function (e) {
    if ((e.metaKey || e.ctrlKey) && e.keyCode == 13) {
        var button = $(e.target.form).find('button[type="submit"]')[0];

        $(e.target).trigger('blur');
        $(button).trigger('click');
    }
}

If you have any suggestions as to a cleaner way of doing this, I'm all ears. Thanks again for responding so quickly I think its pretty awesome how active you are with the community you created. VueJS is a pleasure to use.

[posva]

@josephjbrewer you can also write v-on:keydown.enter='handleCmdEnter($event)' and get rid of the e.keyCode == 13

[martianmartian]

how to do combo key down?

[nmeirik]

Mac Cmd key is not considered a modifier and you cannot check it on the event

What exactly does this mean? According to this page, the Command key is indeed considered a modifier.