如何在 CodeMirror 中触发键盘事件？答案

【问题标题】：How can I trigger keyboard events in CodeMirror?如何在 CodeMirror 中触发键盘事件？
【发布时间】：2013-10-23 21:35:08
【问题描述】：

我正在使用不同的文本字段作为 CodeMirror 的代理。我想使用closebrackets.js 等功能，这些功能通过keydown、keypress 和keyup 等键盘事件激活。我尝试了几种不同的方法来触发这些事件，但都没有导致 CodeMirror 收到任何东西：

kc = 219
e = $.Event 'keydown', { which: kc }
$( myCodeMirror.getInputField() ).trigger e

不起作用。不会触发任何事件。

cmIF = $( myCodeMirror.getInputField() )

textArea = $('<textarea></textArea>')
$('body').append textArea
textArea.keydown (e) ->
    cmIF.focus()
    return

kc = 219
e = $.Event 'keydown', { which: kc }
textArea.trigger e

试图从不同的文本区域转发事件。不工作。 CM 不会触发事件。

$( myCodeMirror.getWrapperElement() ).children().each (index) ->
    $(this).trigger e
    return

尝试在 CM 包装器的每个子级上触发事件。不工作。没有触发任何 CM 事件。

我在这里做错了什么？如何在 CodeMirror 实例上触发键盘事件？

【问题讨论】：

标签： javascript jquery events coffeescript codemirror

【解决方案1】：

我不确定我是否 100% 理解您，但目前我在为 codemirror 实例定义配置选项时定义键盘事件。

var cmInstance = CodeMirror(target, {
    value: myTextArea.value,
    //other options here perhaps

    //defining some keyboard shortcuts
    extraKeys: {
        "Ctrl-J": "toMatchingTag",
        "Ctrl-S": function(cm) {
            saveCode(cm); //function called when 'ctrl+s' is used when instance is in focus
        },
        "F11": function(cm) {
            toggleFullscreen(cm,true); //function called for full screen mode 
        },
        "Esc": function(cm) {
            toggleFullscreen(cm,false); //function to escape full screen mode
        }
    }
});

请记住，这些函数只会在 codemirror 实例处于焦点时触发。然后你可以在你的函数中做任何你喜欢的事情，甚至可以添加新的监听器来查看发生了什么样的事件（？）。

我希望这会有所帮助。

【讨论】：

你在正确的轨道上，但我想触发任何关键事件，而不仅仅是快捷方式。例如，当我键入任何字母或数字时，CodeMirror 会触发 onkeydown 事件。我想触发这些事件而无需手动输入字符。也就是说，我想在CodeMirror上使用JQuery的$.Event( 'keydown', { which: aKeyCode } )函数。
我不想监听事件，我想触发事件。查看this other SO question 和the JQuery trigger docs 以供参考。
您可以在启动后向 cm 实例添加事件侦听器，如下所示：启动：var cm = CodeMirror(target, {value: value});，然后监听：cm.on('keydown', function(cm, e) {alert(e.keyCode);});。抱歉，我看到了您的请求现在触发。

【解决方案2】：

我也有同样的痛苦，最后我找到了解决办法。我不知道这是否丑陋，但它对我有用。希望它对你有用。

myCodeMirror.options.extraKeys.F11(); //trigger F11 assigned function
myCodeMirror.options.extraKeys.["Ctrl-S"](); //trigger Ctrl-S assigned function

【讨论】：

【解决方案3】：

codemirror 带有一个未记录的函数 triggerOnKeyDown ，您可以使用它触发 codemirror 上的按键：

const ev = {
  type: 'keydown',
  keyCode: 40 // the keycode for the down arrow key, use any keycode here
}
cm.triggerOnKeyDown(ev)

【讨论】：

你应该描述你的解决方案。