I'm using a different textfield as a proxy for CodeMirror. I want to use features such as closebrackets.js which are activated via keyboard events such as keydown, keypress, and keyup. I've tried several different approaches to trigger these events, none of which have caused CodeMirror to receive anything:

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

Doesn't work. No events are fired.

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

Trying to forward events from a different text area. Doesn't work. CM doesn't events don't get triggered.

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

Trying to trigger the event on every child of CMs wrapper. Doesn't work. No CM events fired.

What am I doing wrong here? How can I trigger keyboard events on a CodeMirror instance?

I'm using a different textfield as a proxy for CodeMirror. I want to use features such as closebrackets.js which are activated via keyboard events such as keydown, keypress, and keyup. I've tried several different approaches to trigger these events, none of which have caused CodeMirror to receive anything:

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

Doesn't work. No events are fired.

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

Trying to forward events from a different text area. Doesn't work. CM doesn't events don't get triggered.

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

Trying to trigger the event on every child of CMs wrapper. Doesn't work. No CM events fired.

What am I doing wrong here? How can I trigger keyboard events on a CodeMirror instance?

• javascript
• jquery
• events
• coffeescript
• codemirror

3 Answers 3

I am not sure if I understand you 100% but currently I define keyboard events when I am defining my configuration options for the codemirror instance.

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

Keep in mind these functions will only fire when the codemirror instance is in focus. Then you can do whatever you like in your functions perhaps even add new listeners to see what sort of event occurred(?).

I hope this helps.

codemirror es with an undocumented function triggerOnKeyDown with which you can trigger a key down on codemirror:

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

I got the same pain too, and finally i find the solution. I don't know this is ugly hack or not, but it is worked on me. Hope it work on you.

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