Capturing keystrokes in dijit.InlineEditBox?

Question

I have a dijit.InlineEditBox with dijit.form.TextArea as the editor. How do I capture the keystrokes?

I've tried on(inlineEditBox, "KeyPress", function()...) but that seems to only connect to events from the InlineEditBox-widget and not from the TextArea-widget.

Answer 1

I think in older versions of dojo (<1.6), you used to be able to pass an onKeyPress function into InlineEditBox's "editorParams" property. But I think in the more recent versions, that was either removed or there's a bug that makes it not work. In recent versions of Dojo, I've added a listener to the "editWidget" of InlineEditBox. I do something like this:

on(eb.wrapperWidget.editWidget, "keypress", function (evt) {
    console.log("EVT:", evt);
});

where eb is the InlineEditBox. However, the wrapperWidget isn't created until the first time you click on the InlineEditBox, so I have to provide a sort of hacky way to initialize the wrapperWidget.

eb.edit();
eb.cancel();

There may be a better way in recent versions of Dojo that I haven't seen, but this is a solution that works. To help, I've created a JSFiddle, http://jsfiddle.net/N5WPk/, of this example.

Answer 2

You're connecting to the InlineEditBox with your on() function. If you want to capture events from the text area, then reference that widget in on(). Also, I would recommend using onKeyUp and getting the value:

var textarea = new Textarea({
        name: "myarea",
        onKeyUp: function(event){
           // get the value and do something with it
        }
        style: "width:200px;"
    }, "myarea").startup();;
});

Edit:

It appears dojo really doesn't want you to to be able to do this :)

The main issue is the Textarea doesn't even get instantiated until the first time you click the editor, so you have to connect to the onBlur event before it you could even get a reference to the widget. Then, you can get access to the textarea's ID, look up the widget, and create a connection to the keyup event. In order to prevent an excess of event handlers, you'll need to destroy the handle to the event after each time the edit is complete, then rebuild it again next time somebody selects the text area. Also, I'm using dijit.registry.byId, but obviously if you're using the amd loader, that isn't how you would do it.

This is really nasty, but it works:

 var editBox = registry.byId("editBox");

   var blurHandle = editBox.on("blur", function(value){
        console.info("only run once");
        var textArea = dijit.registry.byId(editBox._focusManager.activeStack[1]);
        var keyupHandle = textArea.on("keyUp", function(event){
            console.info("value: ", event.keyCode);
        });

        editBox.on("change", function(value){
          keyupHandle.remove();
        });

    });