在 TEXTAREA 中使用 jQuery 进入

当光标在 德克萨斯州内并且按下 Ctrl + Enter时,我如何触发某些东西?

我正在使用 jQuery。

68141 次浏览

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.

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.

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


//ctrl on key down set flag


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

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.

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

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
}

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();
}
});

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} />
);
};