How do I trigger something when the cursor is within TEXTAREA and Ctrl+Enter is pressed?
I am using jQuery.
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:
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
.ctrlKey
correspond to the Command key on Macs?
Commented
Oct 13, 2015 at 11:50
if ((e.keyCode == 10 || e.keyCode == 13) && (e.ctrlKey || e.metaKey))
Commented
Aug 3, 2017 at 18:15
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.
10
, not 13
.
Commented
Nov 24, 2011 at 11:46
keypress
event, the keycode will be 10, but keydown
or keyup
will report 13. Only test chrome
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
}
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
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
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');
}
});
});
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?)
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
}
};
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} />
);
};
$('my_text_area').focus(function{ set_focus_flag });
//ctrl on key down set flag
//enter on key down = check focus flag, check ctrl flag
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();
}
});
if
…else if
” to a single if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13))
.
Commented
Mar 26, 2019 at 5:59
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.
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.