I want to force the user to edit the value of the NumericStepper by using the arrows only so they cannot type a value directly into the value field

Question

When using the NumericStepper I want to force the user to only be able to edit the value using the NumericStepper's up and down arrows. I do not want the user to be able to type in a value directly. How can i do this in flex 4? Can someone please provide an example?

Thanks

Answer 1

Yo need to set the NumericStepper's textDisplay as non editable. You can do it once the component has been initialized:

    <fx:Script>
        <![CDATA[
            protected function init():void {
                nmStppr.textDisplay.editable = false;
            }
        ]]>
    </fx:Script>

    <s:NumericStepper id="nmStppr"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="init();"/>

or creating a custom skin as explained here

Answer 2

You can try another way so that you can not change the value in NumericStepper. These value would become non-editable.

<s:NumericStepper id="num"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="init();"/>

<fx:Script>
        <![CDATA[
            protected function init():void {
               num.mx_internal::inputField.editable=false;
            }
        ]]>
    </fx:Script>