Event on "Enter" key

Suite and Optimus Suite 7
#1

Is there any way to respond to the “Enter” event after a ribbon input control is typed? The “Change” event has no effect.

#2

I don’t think there’s a built-in way to handle an “Enter” keypress in the Ribbon or Toolbar (they’re nearly identical in their APIs as far as I’ve experienced, so what works for one tends to work for the other.) So I think you have to tie a standard JS event to the underlying input.

I saw they were doing something like this in their File Explorer demo app, so I rooted around in the page code until I saw how they were linking an event to the input object. (Again, this is a toolbar, but I think it should work the same for a ribbon.)

toolbar.events.on("inputCreated",function(id,el){

});

At this point, you just need to handle the keypress event in the event with standard JavaScript, so you can do something like this:

// Execute a function when the user releases a key on the keyboard
el.addEventListener("keyup", function(event) {
    // Number 13 is the "Enter" key on the keyboard
    if (event.keyCode === 13) {
        // Cancel the default action, if needed
        event.preventDefault();

        // Do whatever you need to do here
    }
});

So the whole thing (stripped down to essentials) would look something like this:

toolbar.events.on("inputCreated",function(id,el){
    el.addEventListener("keyup", function(event) {
        if (event.keyCode === 13) {
            // Do whatever you need to do here
        }
    }
});
#3

Thank you kcasarez, it does work!

1 Like