Flex: Text Input that accepts number only

Question

Need a code that only accepts numbers. Upon inputting, the code must check if it is number, if not, it must remove the entered key or not enter it at all

Solution 1

look at the restrict property on the TextInput class. Set it to "0-9"

Solution 2

   <s:TextInput id="textInput"
                restrict="0-9"
                widthInChars="20"
                maxChars="20" />
   <mx:TextInput id="textInput"
                restrict="0-9"
                widthInChars="20"
                maxChars="20" />

Solution 3

There's a control called NumericStepper.

See: http://livedocs.adobe.com/flex/3/html/help.html?content=controls_11.html

If you don't want the up and down arrows there, you can set their skin class to null.

Cheers, Sly

Solution 4

<?xml version="1.0"?>
<!-- Simple example to demonstrate the TextInput control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

    <mx:Panel title="Dodawanie dwóch liczb :)" height="279" width="238" 
        paddingTop="10" paddingLeft="10">

        <mx:TextInput id="src"
          restrict="0-9"
                maxChars="20" />
        <mx:TextInput id="dest"
          restrict="0-9"
                maxChars="20"/>

        <mx:Button label="dodaj" click= "dodaj();" id="but"/>
        <mx:Label text="Suma" width="59"/>
        <mx:Label text="0" width="160" id="wynik"/>

    </mx:Panel>
    <mx:Script>
     <![CDATA[
      import mx.formatters.NumberBase;
      public function dodaj():Number
      {
       var liczba:Number = Number(src.text) + Number(dest.text);
       wynik.text = liczba.toString();
       return 0;
      }

     ]]>
    </mx:Script>
</mx:Application>

Solution 5

Look at mx.validators.NumberValidator: http://livedocs.adobe.com/flex/3/langref/mx/validators/NumberValidator.html

View more solutions