Reputation: 19896

Ctrl + Enter using jQuery in a TEXTAREA

How do I trigger something when the cursor is within TEXTAREA and Ctrl+Enter is pressed?

I am using jQuery.

Upvotes: 113

Answers (10)

bsb_coffee

Reputation: 7051

Worth noting that keyCode has been deprecated.

You can use:

if((e.ctrlKey || e.metaKey) && e.key === "Enter")

Which works on both Mac and Windows.

Using React + TS it looks something like this:

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if((e.ctrlKey || e.metaKey) && e.key === "Enter"){
         //do something
     }
};

Upvotes: 2

sareno

Reputation: 696

event.keyCode and event.which are deprecated.

The following works to handle CTRL/Command + Enter on Mac and Windows (React)

import React from "react";

export const Component = () => {
    const keyDownHandler = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
        if ((e.ctrlKey || e.metaKey) && e.key == "Enter") {
            // handle Ctrl/Command + Enter
        }
    };
    
    return (
        <textarea onKeyDown={keyDownHandler} />
    );
};

Upvotes: 1

joeln

Reputation: 3633

This can be extended to a simple, but flexible, jQuery plugin as in:

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

Thus

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

should submit a form when the user presses Ctrl + Enter with focus on that form's textarea.

(With thanks to How can I detect pressing Enter on the keyboard using jQuery?)

Upvotes: 2

Valamas

Reputation: 24719

I found answers of others either incomplete or not cross-browser compatible.

This code works in Google Chrome.

$(function ()
{
    $(document).on("keydown", "#textareaId", function(e)
    {
        if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey)
        {
            alert('Ctrl + Enter');
        }
    });
});

Upvotes: 5

Yaroslav Yakovlev

Reputation: 6483

Actually this one does the trick and works in all browsers:

if ((event.keyCode == 10 || event.keyCode == 13) && event.ctrlKey)

Link to js fiddle.

Notes:

In Chrome on Windows and Linux, Enter would be registered as keyCode 10, not 13 (bug report). So we need to check for either.
ctrlKey is control on Windows, Linux and macOS (not command). See also metaKey.

Upvotes: 158

Christian C. Salvadó

Reputation: 827198

You can use the event.ctrlKey flag to see if the Ctrl key is pressed. Something like this:

$('#textareaId').keydown(function (e) {

  if (e.ctrlKey && e.keyCode == 13) {
    // Ctrl + Enter pressed
  }
});

Check the above snippet here.

Upvotes: 142

mkoryak

Reputation: 57918

First you have to set a flag when Ctrl is pressed; do this onkeydown.

Then you have to check the keydown of Enter. Unset the flag when you see a keyup for Ctrl.

Upvotes: 0

Serhii Matrunchyk

Reputation: 9363

Universal solution

This supports macOS as well: both Ctrl+Enter and ⌘ Command+Enter will be accepted.

if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
    // do something
}

Upvotes: 114

Barry Chapman

Reputation: 6780

Maybe a little late to the game, but here is what I use. It will also force submit of the form that is the current target of the cursor.

$(document.body).keypress(function (e) {
    var $el = $(e.target);
    if (e.ctrlKey && e.keyCode == 10) {
        $el.parents('form').submit();
    } else if (e.ctrlKey && e.keyCode == 13) {
        $el.parents('form').submit();
    }
});

Upvotes: 0

idrumgood

Reputation: 4924

$('my_text_area').focus(function{ set_focus_flag });

//ctrl on key down set flag

//enter on key down = check focus flag, check ctrl flag

Upvotes: 0

Ctrl + Enter using jQuery in a TEXTAREA

Answers (10)

Related Questions