Ctrl +在 TEXTAREA 中使用 jQuery 输入

Question

当光标位于 TEXTAREA 内并且按下 Ctrl+Enter 时，如何触发某些操作？

我正在使用 jQuery。

Answer 1

实际上，这个方法可以解决问题，并且适用于所有浏览器：

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

链接到 js fiddle。

注意：

• 在 Windows 和 Linux 上的 Chrome 中，Enter 将注册为 keyCode 10，而不是 13 (错误报告）。所以我们需要检查其中任何一个。
• ctrlKey 是 control（不是 命令）。另请参阅metaKey。

Answer 2

您可以使用 event.ctrlKey 标志来查看如果按下 Ctrl 键。像这样的事情：

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

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

在此处检查上面的代码片段。

Answer 3

通用解决方案

这也支持 macOS：Ctrl+Enter 和 ⌘ Command+Enter 将被接受。

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

Answer 4

我发现其他人的答案要么不完整，要么不跨浏览器兼容。

此代码适用于 Google Chrome。

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

Answer 5

这可以扩展到一个简单但灵活的 jQuery 插件，如下所示：

$.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);
            }
        })
    })
}

因此，

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

当用户按下 Ctrl + Enter 时，应该提交一个表单，并将焦点放在该表单的文本区域上。

（感谢 如何使用 jQuery 检测键盘上的 Enter 键？）

Answer 6

值得注意的是 keyCode 已被弃用。

您可以使用：

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

它适用于 Mac 和 Windows。

使用 React + TS 看起来像这样：

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

Answer 7

event.keyCode 和 event.which 已弃用。

以下方法可在 Mac 和 Windows 上处理 CTRL/Command + Enter(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} />
    );
};

Answer 8

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

//ctrl on key down set flag

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

Answer 9

也许有点晚了，但这就是我使用的。它还将强制提交作为光标当前目标的表单。

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

Answer 10

首先，您必须在按下 Ctrl 时设置一个标志；执行此 onkeydown 操作。

然后你必须检查Enter的按键。当您看到 Ctrl 按键时取消设置该标志。