7 Replies Latest reply on Aug 19, 2009 1:44 PM by manofspirit

    Tabbing is not working as expected, Please Help

    manofspirit Level 1

      Hello guys

       

      I am into a issue regarding Tabbing,

       

      I have a simple form with 2 TextFields and One Button

       

      Email    [tabIndex = 0]

      Password    [tabIndex = 1]

      [Button]     [tabIndex = 1]

       

       

       

      signInKeyboard(event:KeyboardEvent):void{
                 
                  if(event.keyCode == 13 || event.keyCode == 32){ //enter and space
                      signIn();
                  }else if(event.keyCode == 9){    //tab
                      Email.setFocus();           
                  }

      }

       

       

       

      Now the problem is, When i run that code and press "Tab" over Button

      Focus goes to "Password" rather than "Email Text Field"

       

      please guide in this regard.

        • 1. Re: Tabbing is not working as expected, Please Help
          Jed Schneider Level 1

          tabIndex =0 ignores that field for indexing.

           

          Try this code (Flex 4) but replace withs:textinputs with mx:textinputs for 3.x and you should be set. In mxml you dont need to add an actionscript function to handle the tabIndex if you specify it. That is handled for you by the framework.

           

           

           

          <s:Application ...>

          <mx:Form>

          <s:TextInput tabIndex="1"/>

          <s:TextInput tabIndex="2"/>

          <s:Button/>

          </mx:Form>

          </s:Application>

          • 2. Re: Tabbing is not working as expected, Please Help
            manofspirit Level 1

            Hi Jed

             

            I tried this too but again, it doesnt work

             

            Here is my Code, Tab goes back to "Password" rather than "Email"

             

             

             

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
            <mx:Script>
                 <![CDATA[
            
                     private function loginKeyboard(event:KeyboardEvent):void{
                          
                          if(event.keyCode == 13 || event.keyCode == 32){ //enter and space
                               login();
                          }else if(event.keyCode == 9){     //tab
                               logEmail.setFocus(); 
                               event.stopPropagation();             
                          }              
                     }
                      
                                
                 ]]>
            </mx:Script>     
                      <mx:TextInput id="logEmail" tabIndex="1"/>
                      <mx:TextInput id="logPassword" displayAsPassword="true" tabIndex="2"/>
                      <mx:Button label="Login" keyDown="loginKeyboard(event)" click="loginHandler(event)" tabIndex="3" id="loginBtn"/>
            
            </mx:Application>
            
            
            • 3. Re: Tabbing is not working as expected, Please Help
              Jed Schneider Level 1

              like i said, you don't need a function to handle the tabIndex if you speicfy it in flex markup. try this

               

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

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">

              <mx:Script>

                   <![CDATA[

               

                       private function loginKeyboard(event:KeyboardEvent):void{

                                   

                       }

                 

                   ]]>

              </mx:Script>    

                        <mx:TextInput id="logEmail" tabIndex="1"/>

                        <mx:TextInput id="logPassword" displayAsPassword="true" tabIndex="2"/>

                        <mx:Button label="Login" keyDown="loginKeyboard(event)" tabIndex="3" id="loginBtn"/>

               

              </mx:Application>

              • 4. Re: Tabbing is not working as expected, Please Help
                manofspirit Level 1

                I actually have two forms

                one for signin, and second for signup

                 

                login form has indices from 1 to 3

                and signup have 4 to 8

                 

                so in this case i want to programmatically set tabbing.

                • 5. use states, not two forms
                  Jed Schneider Level 1

                  use one form and change states. this should help you out.

                   

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

                  1 person found this helpful
                  • 6. Re: Tabbing is not working as expected, Please Help
                    Flex harUI Adobe Employee

                    You should have unique tabIndex for each field.  If more than one component has the same index you lose control over which one gets focus first.

                     

                    If you want to override the FocusManager's decision, use KEY_FOCUS_CHANGE and preventDefault() instead of KEY_DOWN and stopPropagation

                     

                    Alex Harui

                    Flex SDK Developer

                    Adobe Systems Inc.

                    Blog: http://blogs.adobe.com/aharui

                    • 7. Re: Tabbing is not working as expected, Please Help
                      manofspirit Level 1

                      Thanks to both friends