Limiting input length in Ribbon

Suite and Optimus Suite 7
#1

I have multiple input fields on a Ribbon. I would like to limit the input length of one field, and ideally have it move to the next field when that length limit is reached. I have not found mentions of a length limit configuration item for the Input control or a afterKeyDown event (like the one for Grid) in the documentation for Ribbon. Is there a way to do either, or hopefully both, of these things?

#2

Never mind. I dug around and guessed that the Input control for a Ribbon was probably the same as the Input control for a form, and tried the “change” event. It fires after each keypress, so I’m able to get the updated value of the input and use substring to restrict the length.

Edit: I also figured out how to set the focus, although a “setFocus” function for Ribbon, like the one available for Form, would be nice. Here’s my code to do it all (assume Ribbon contains 2 inputs with IDs “JobPrefix” and “CounterLetter”):

ribbon.events.on("change",function(id){
    if (id.indexOf("JobPrefix") !== -1){          //only do this on JobPrefix input
        var val = ribbon.data.getItem(id).value;
        if (val.length > 5){
            ribbon.data.getItem(id).value = val.substr(0,6);       //limit to 6 characters
            var inps = document.getElementByTagName("input");       //get all inputs
            for (var i=0;i<inps.length;i++){
                if (inps[i].getAttribute("dhx_id") === "CounterLetter"){
                    inps[i].focus();        //set focus
                    break;                  //don't need to check more inputs
                }
            }
        }
    }
}
1 Like
#3

A setFocus() method is appreciated.

#4

Hi kcasarez and jyginyer,

I solve this issue using the inputCreated event.

ribbon.events.on("inputCreated", function(id, el){
    // keep a reference to an specific input element
    if(id === "name"){
       this._input_name = el
    }
});

If for some reason the input is removed we’ll get a new reference each time it’s created again. To avoid undesired exceptions always check that you variable point to a valid reference.

One dark side of this approach comes with the fact that inputCreated is usually not triggered when we create the input in the constructor. After all we set the event handler after the input is created. Use ribbon.data.parse to avoid this.

Let me know if you find this useful or if exists another issue with this approach.

:vulcan_salute: greetings

BTW: just as a curiosity, the input control of the form and the one used in the Ribbon internaly are not the same. The one used in the ribbon is a ligthweigth version but as both are native html elements it does not matter.