【问题标题】:Ctrl + Enter using jQuery in a TEXTAREACtrl+Enter jQuery 在 TEXTAREA
【发布时间】:2010-12-13 15:23:27
【问题描述】:

当光标在 TEXTAREA 内并按下 Ctrl+Enter 时如何触发?使用 jQuery。谢谢

【问题讨论】:

  • 您接受的答案不起作用。请更改您接受的答案

标签: javascript jquery html hotkeys


【解决方案1】:

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

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

链接到js fiddle

注意事项:

  • 在 Windows 和 Linux 上的 Chrome 中,enter 将注册为 keyCode 10,而不是 13 (bug report)。所以我们需要检查两者。
  • ctrlKey 在 Windows、Linux 和 macOS 上是 control(不是 command)。另请参阅metaKey

【讨论】:

  • 小提琴在 Firefox 27 中不起作用,这是怎么回事?
  • @Yaroslav :你能告诉你答案中“event.keyCode == 10”的用途吗?
  • 如果有人仍然想知道 keyCode 10 和其他 chrome 的东西,请阅读this
  • @YaroslavYakovlev ctrlKey 是否对应 Mac 上的 Command 键?
  • 也支持Mac:if ((e.keyCode == 10 || e.keyCode == 13) && (e.ctrlKey || e.metaKey))
【解决方案2】:

您可以使用event.ctrlKey 标志来查看是否按下了 Ctrl 键,如下所示:

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

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

检查上面的sn-p here

【讨论】:

  • 这在谷歌浏览器中不起作用。当按下 Ctrl + Enter 键时,键码是10,而不是13
  • 这不起作用。 Yarolslav Yakovlev 下面的解决方案确实可以正常工作。请更改接受的答案以节省人们的时间。
  • @Replete 你测试过哪个环境?有没有关于 keyCode 10 的文档?
  • keyCode 10 不应该再出现在 Chrome 上,请参阅 bugs.chromium.org/p/chromium/issues/detail?id=79407
  • 触发keypress事件时,keycode为10,但keydownkeyup会报13。只测试chrome
【解决方案3】:

通用解决方案

这也支持 macOS:Ctrl+Enter⌘ Command+Enter 都将被接受。

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

【讨论】:

  • 不要忽略这个答案,因为它的分数较低,它只是一个较新的答案,实际上更好。
  • 第一部分解释:在macOS上,e.ctrlKey检测⌃ Controle.metaKey检测⌘ Command。如果您希望 Ctrl-Enter 和 Command-Enter 都触发该行为,请使用此选项。
  • 你能解释一下为什么你接受10e.keyCode 来表示除了13 之外的Enter? MDN keyCode documentation 仅列出 13 作为 Enter 的可能值,并在多个浏览器和操作系统中进行了测试。
  • @RoryO'Kane Windows 和 Linux 上的某些 Chrome 版本显然使用值 10。
【解决方案4】:

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

此代码适用于谷歌浏览器。

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

【讨论】:

  • 您能否考虑通过添加更多解释来改进您的答案?谢谢 :) 否则这只是对低质量问题的低质量回答。
  • @Valamas :你能告诉你答案中“event.keyCode == 10”的用途吗?
  • 我喜欢复制和粘贴答案
【解决方案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 并关注表单的文本区域时应该提交表单。

(感谢https://stackoverflow.com/a/9964945/1017546

【讨论】:

    【解决方案6】:
    $('my_text_area').focus(function{ set_focus_flag });
    
    //ctrl on key down set flag
    
    //enter on key down = check focus flag, check ctrl flag
    

    【讨论】:

      【解决方案7】:

      首先你必须在按下 Ctrl 时设置一个标志,在 onkeydown 上执行此操作。然后你必须检查回车键。当您看到 Ctrl 的按键时取消设置标志。

      【讨论】:

      • 不需要这个。例如,KeyboardEvent 已经包含指示在按住 Ctrl 时是否按下某个键的属性。无需手动检测Ctrl 键。
      【解决方案8】:

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

      $(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”简化为单个if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13))
      猜你喜欢
      • 1970-01-01
      • 2019-04-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-11-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多