Ctrl + Enter在文本中使用jQuery

ia2d9nvy  于 2022-11-03  发布在  jQuery
关注(0)|答案(9)|浏览(151)

当光标位于 TEXTAREA 内并按下Ctrl+Enter时,如何触发某些操作?
我使用的是jQuery。

qrjkbowd

qrjkbowd1#

实际上,这个方法可以在所有浏览器中使用:

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

链接到js fiddle
备注:

  • 在Windows和Linux上的Chrome中,Enter会注册为keyCode 10,而不是13(bug report),所以我们需要检查其中的任何一个。
  • ctrlKey是Windows、Linux和macOS上的控制(不是命令)。另请参阅metaKey
jogvjijk

jogvjijk2#

你可以使用event.ctrlKey标志来查看是否按下了Ctrl键。

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

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

检查上面的代码片段here

yiytaume

yiytaume3#

通用解决方案

这也支持macOS:Ctrl+Enter和Command+Enter都可以接受。

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

csbfibhn4#

我发现其他人的答案不完整或不兼容跨浏览器。
这段代码可以在Google Chrome浏览器中使用。

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

zsbz8rwp5#

这可以扩展为一个简单但灵活的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并将焦点置于表单的文本区域时提交表单。
(With感谢 * 我如何使用jQuery检测到按下键盘上的Enter键?*)

2ekbmq32

2ekbmq326#

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

//ctrl on key down set flag

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

dy2hfwbg7#

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

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

siv3szwd8#

首先,您必须在按下Ctrl时设置一个标志;按下按键即可完成此操作
然后你必须检查Enter的keydown。当你看到Ctrl的keyup时取消设置标志。

a7qyws3x

a7qyws3x9#

不建议使用event.keyCodeevent.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} />
    );
};

相关问题