How do I trigger something when the cursor is within TEXTAREA and Ctrl+Enter is pressed?
I am using jQuery.
How do I trigger something when the cursor is within TEXTAREA and Ctrl+Enter is pressed?
I am using jQuery.
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.
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
.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
}
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?)
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();
}
});
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.
I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....
I have a div <div id="masterdiv"> which has several child <div>s. Example: <div id="masterdiv"> <div id="childdiv1" /> <div id="childdiv2" /> <div id="...
I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...
<form><input type="file" name="first" onchange="jsFunction(2);"> <input type="file" name="second" onchange="jsFunction(3);"</form> Possible to pass just numbers to the js ...
So I ve got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I ...
I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...
Is it possible to reload a form after file-input change? I have a form where the user can chose an image for upload. I also have a php script which displays that image resized. I only wonder if it ...
I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!