10 Replies Latest reply on Feb 3, 2011 3:52 PM by Flex harUI

    Disallow numbers in textinput while typing

    jmandawg

      Hi all,

       

      I'm trying to do something very simple.  When a user types into a text field i want to not allow them to type characters and also to convert lowercase characters to uppercase.

       

      I tried the following with no success.  I think this should be a pretty simple/common problem.  Hopefully someone can help.

       

       

      I put this method into the KEY_DOWN event but it doesn't work.  It goes into the event handler, but doesn't do anything.

       

      private function txtElementKeyUpHandler(event:KeyboardEvent):void
              {

                  if(event.charCode >= 48 && event.charCode <= 57)

                  {

                    event.preventDefault();

                  }
                  if(event.charCode >= 97 && event.charCode <= 122)
                  {
                      event.charCode -= 32;
                  }
              }

        • 1. Re: Disallow numbers in textinput while typing
          jmandawg Level 1

          Sorry, typed it wrong:

           

          i want to not allow them to type NUMBERS and also to convert lowercase characters to uppercase.

           

          Also it is in the key down handler:

           

          private function txtElementKeyDOWNHandler(event:KeyboardEvent):void

          • 2. Re: Disallow numbers in textinput while typing
            Flex harUI Adobe Employee

            TEXT_INPUT event, not KEY_DOWN

            • 3. Re: Disallow numbers in textinput while typing
              FinFlex Level 1

              <mx:TextInput x="585" y="348" restrict="A-Z\\a-z"/>

               

              Looking for this?

              • 4. Re: Disallow numbers in textinput while typing
                fldev11

                ^^^^

                 

                I was just about to add this extremely simple and effective.

                • 5. Re: Disallow numbers in textinput while typing
                  jmandawg Level 1

                  The restrict property is nice, but not powerful enough for what we are ultimately trying to do.

                  This is for a spark TextInput, the textInput (TEXT_INPUT) event does not work as expected.

                   

                  The following will not compile as if the event is not visible:

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:s="library://ns.adobe.com/flex/spark"
                                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
                      <fx:Script>
                          <![CDATA[
                  protected function onTextInput(event:TextEvent):void
                              {
                                  trace("Inside event");   
                                  event.preventDefault();
                              }
                  ]]>
                      </fx:Script>
                      <fx:Declarations>
                          <!-- Place non-visual elements (e.g., services, value objects) here -->
                      </fx:Declarations>
                     
                      <s:TextInput id="myTI"  textInput="{onTextInput(event)}" />
                  </s:Application>

                   

                   

                  The following compiles and gets inside the even handler, but the preventDefault() does not work correctly.  No characters should appear in the textinput.

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:s="library://ns.adobe.com/flex/spark"
                                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
                      <fx:Script>
                          <![CDATA[
                              import mx.events.FlexEvent;

                              protected function application1_creationCompleteHandler(event:FlexEvent):void
                              {
                                  myTI.addEventListener(TextEvent.TEXT_INPUT, onTextInput);
                              }
                              protected function onTextInput(event:TextEvent):void
                              {
                                  //No characters should appear in text field
                                  trace("Inside event");   
                                  event.preventDefault();
                              }

                          ]]>
                      </fx:Script>
                      <fx:Declarations>
                          <!-- Place non-visual elements (e.g., services, value objects) here -->
                      </fx:Declarations>
                      <s:TextInput id="myTI" />
                  </s:Application>
                  • 6. Re: Disallow numbers in textinput while typing
                    Flex harUI Adobe Employee

                    Hmmm.  Looks like we have a bug.  Please file it at bugs.adobe.com/jira.

                     

                    Your second attempt is better, but you will need to use capture phase like

                    this:

                     

                                    myTI.addEventListener(TextEvent.TEXT_INPUT, onTextInput,

                    true);

                    • 7. Re: Disallow numbers in textinput while typing
                      jmandawg Level 1

                      Still not working, this should not accept any characters:

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                     xmlns:s="library://ns.adobe.com/flex/spark"
                                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
                          <fx:Script>
                              <![CDATA[
                                  import flashx.textLayout.operations.InsertTextOperation;
                                 
                                  import mx.events.FlexEvent;
                                 
                                  import spark.events.TextOperationEvent;

                                  protected function application1_creationCompleteHandler(event:FlexEvent):void
                                  {
                                      myTI.addEventListener(TextEvent.TEXT_INPUT, onTextInput, true);
                                  }
                                  protected function onTextInput(event:TextEvent):void
                                  {
                                      //No characters should appear in text field
                                      trace("Inside event");   
                                      event.preventDefault();
                                  }


                              ]]>
                          </fx:Script>
                          <fx:Declarations>
                              <!-- Place non-visual elements (e.g., services, value objects) here -->
                          </fx:Declarations>
                          <s:VGroup>
                              <s:TextInput id="myTI" />
                          </s:VGroup>
                         
                      </s:Application>

                      • 8. Re: Disallow numbers in textinput while typing
                        Flex harUI Adobe Employee

                        This code does not accept characters for me:

                         

                        <?xml version="1.0" encoding="utf-8"?>

                        <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                       xmlns:s="library://ns.adobe.com/flex/spark"

                                       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"

                        minHeight="600"

                        creationComplete="application1_creationCompleteHandler(event)">

                            <fx:Script>

                                <![CDATA[

                                    import mx.events.FlexEvent;

                                     

                                    protected function

                        application1_creationCompleteHandler(event:FlexEvent):void

                                    {

                                        myTI.addEventListener(TextEvent.TEXT_INPUT, onTextInput,

                        true);

                                    }

                                    protected function onTextInput(event:TextEvent):void

                                    {

                                        //No characters should appear in text field

                                        trace("Inside event");

                                        event.preventDefault();

                                    }

                                     

                                ]]>

                            </fx:Script>

                            <fx:Declarations>

                                <!-- Place non-visual elements (e.g., services, value objects) here

                        -->

                            </fx:Declarations>

                            <s:TextInput id="myTI" />

                        </s:Application

                        • 9. Re: Disallow numbers in textinput while typing
                          jmandawg Level 1

                          What build are you running?  I just tested the code on 2 different computers and i can enter text into the textinput.

                           

                          Flash player version:  10,1,102,64 installed

                          Flash Builder Plugin:  v4.0.1 build 277662

                          • 10. Re: Disallow numbers in textinput while typing
                            Flex harUI Adobe Employee

                            I am using the Hero preview.  I will try to remember to try it on an older

                            build later.  TEXT_INPUT handling is a feature of the TLF library that is in

                            the SDK.  The player and FlashBuilder version probably don't matter.