113

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

I am using jQuery.

1
  • the answer you accepted does not work. Please change your accepted answer Commented Jun 13, 2017 at 11:10

10 Answers 10

158

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.
8
  • 1
    The fiddle doesn't work in Firefox 27, what's wrong?
    – CodeManX
    Commented Mar 6, 2014 at 21:17
  • 6
    @Yaroslav : Can you please tell what is the use of "event.keyCode == 10" in you answer. Commented Sep 9, 2014 at 6:45
  • 5
    If anyone still wondering about keyCode 10 and other chrome stuff read this. Commented Mar 23, 2015 at 10:28
  • 2
    @YaroslavYakovlev does ctrlKey correspond to the Command key on Macs? Commented Oct 13, 2015 at 11:50
  • 5
    To support Mac too: if ((e.keyCode == 10 || e.keyCode == 13) && (e.ctrlKey || e.metaKey)) Commented Aug 3, 2017 at 18:15
142

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.

5
  • 16
    This does not work in Google Chrome. When Ctrl + Enter is pressed the key code is 10, not 13. Commented Nov 24, 2011 at 11:46
  • 41
    This does not work. Yarolslav Yakovlev's solution below does work properly. Please change accepted answer to save people time. Commented May 20, 2012 at 14:56
  • 1
    @Replete Which environment have you tested? Is there any documentation about keyCode 10? Commented Feb 14, 2014 at 9:39
  • keyCode 10 shouldn't happen anymore on Chrome, see bugs.chromium.org/p/chromium/issues/detail?id=79407
    – swissspidy
    Commented Aug 3, 2017 at 13:09
  • when trigger keypress event, the keycode will be 10, but keydown or keyup will report 13. Only test chrome
    – iulo
    Commented Sep 1, 2017 at 3:06
114

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
}
4
  • 25
    Don't ignore this answer because it's got a lower score, it's just a newer answer, it's actually better.
    – David Bell
    Commented Mar 16, 2017 at 15:38
  • 1
    Explanation of first part: On macOS, e.ctrlKey detects ⌃ Control and e.metaKey detects ⌘ Command. Use this if you want both Ctrl-Enter and Command-Enter to trigger the behavior. Commented Mar 26, 2019 at 5:53
  • 1
    Can you explain why you accept a e.keyCode of 10 to mean Enter in addition to 13? The MDN keyCode documentation lists only 13 as a possible value for Enter, tested across multiple browsers and operating systems. Commented Mar 26, 2019 at 6:06
  • 1
    @RoryO'Kane Some versions of Chrome on Windows and Linux use the value 10, apparently.
    – Flimm
    Commented Sep 5, 2019 at 10:40
5

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');
        }
    });
});
3
  • 2
    Could you consider improving your answer by adding further explanations? Thanks :) Otherwise this would just be a low quality answer to a low quality question.
    – Theolodis
    Commented May 15, 2014 at 5:04
  • 1
    @Valamas : Can you please tell what is the use of "event.keyCode == 10" in you answer. Commented Sep 9, 2014 at 6:45
  • 1
    I love copy & paster answers Commented Dec 8, 2014 at 11:26
2

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?)

2

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
     }
};
1

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} />
    );
};
0
$('my_text_area').focus(function{ set_focus_flag });

//ctrl on key down set flag

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

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();
    }
});
1
  • 1
    You could simplify the “ifelse if” to a single if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13)). Commented Mar 26, 2019 at 5:59
0

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.

1
  • 1
    There's no need for this. KeyboardEvent already contains properties that indicate whether a key was pressed while Ctrl was being held or not, for example. There is no need for manual detection of the Ctrl key.
    – Arad
    Commented Oct 25, 2021 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.