Problem with ui:inputText and ui:inputNumber : maxlength and restrict some characters

Question

I have to use an input field, ideally an ui:inputNumber, so the user can only enter numbers. But I also need to put a maxlength on this field and this attribute does not work on ui:inputNumber.

The attribute maxlength works with the field ui:inputText but the user can also enter letters etc. So if I use this field I need to put a restriction on the field if the user enter a letter.

Do you know how to make one or the other way to make this field ?

Answer 1

Well with a little bit of code you can achieve this. You need to use maxlength attribute to restrict the length and following approach for number only validation.

Have an attribute bound to your inputText

<aura:attribute name="inputN" type="String"/>
<ui:inputText value="{!v.inputN}" keypress="{!c.validate}" keyup="{!c.validate}" keydown="{!c.validate}"  updateOn="keypress, keyup, keydown"/>

In your controller, write validate function:

validate  : function(component, event, helper) {
        var inp = component.get('v.inputN');
        if(isNaN(inp))
            component.set('v.inputN', inp.substring(0, inp.length - 1));
    }

It will on press of each key, check if the whole text is number of not, if not will remove the last entered character.

In case of validating maxlength using ui:inputNumber,

<aura:attribute name="inputN" type="Decimal"/>
    <ui:inputNumber value="{!v.inputN}" keyup="{!c.validate}"  updateOn="keyup"/>

Js function:

validate  : function(component, event, helper) {
        var inp = component.get('v.inputN');
        if(inp.length > 2)
        {
            component.set('v.inputN', parseFloat(inp.substring(0, 2)));
        }
    }