How can I trigger keyboard events in CodeMirror?

Question

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?

JeffJenk · Accepted Answer · 2013-10-17T08:08:32.623

8

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.

edited Oct 17 '13 at 08:08

answered Oct 17 '13 at 08:02

JeffJenk

2,575
2
21
28

1

You're on the right track, but I want to fire any key event, not just shortcuts. For example, CodeMirror fires a `onkeydown` event when I type any letter or number. I want to trigger those events without needing to type characters manually. In other words, I want to use JQuery's `$.Event( 'keydown', { which: aKeyCode } )` function on CodeMirror. – zakdances Oct 17 '13 at 09:04
I don't want to listen for the event, I want to **trigger** the event. Look at [this other SO question](http://stackoverflow.com/questions/832059/definitive-way-to-trigger-keypress-events-with-jquery) and [the JQuery trigger docs](http://api.jquery.com/trigger/) for reference. – zakdances Oct 17 '13 at 11:12
You can add an event listener to the cm instance after initiation like this: Initiate: `var cm = CodeMirror(target, {value: value});` and then listen: `cm.on('keydown', function(cm, e) {alert(e.keyCode);});`. Sorry I see your request for a **trigger** now. – JeffJenk Oct 17 '13 at 11:30

danday74 · Answer 2 · 2017-12-19T09:05:25.730

2

codemirror comes 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)

edited Dec 19 '17 at 09:05

answered Dec 18 '17 at 15:35

danday74

52,471
49
232
283

You should describe your solution. – Jess Dec 18 '17 at 15:54

score 1 · Answer 3 · answered Dec 02 '17 at 07:05

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

How can I trigger keyboard events in CodeMirror?

3 Answers3