7 Replies Latest reply on Jun 1, 2011 12:22 AM by Justin Daily

    MaskedTextInput:  Multiple Simultaneous Focus Points

    Justin Daily

      I have a Flex app I'm working on that needs input fields for dates and times.  There will be fields for StartDate, StartTime, EndDate, and EndTime.  For the date fields, I'm using the MaskedTextInput (http://blogs.adobe.com/flex/2006/11/component_masked_textinput.html) and for the time fields, just Spark TextInputs.  Since 95% of the time, the start date and the end date will be the same, I tried to set up a function on the StartTime TextInput which skips over the EndDate MaskedTextInput field entirely and goes to the EndTime TextInput.  Here's the MXML:

       

      <s:Label text="Start Date"/>
      <mask:MaskedTextInput id="startDate" inputMask="MM/DD/YYYY" restrict="0-9/"
              maxChars="10" focusOut="startDate.text=inputFormatDate(startDate.fullText,true); endDateAutofill()"/>
      <s:Label text="Start Time"/>
      <s:TextInput id="startTime" focusOut="endDateSkipper()"/>
      <s:Label text="End Date"/>
      <mask:MaskedTextInput id="endDate" inputMask="MM/DD/YYYY" restrict="0-9/"
              maxChars="10" focusOut="endDate.text=inputFormatDate(endDate.fullText);"/>
      <s:Label text="End Time"/>
      <s:TextInput id="endTime"/>
      

       

      And here's the endDateSkipper function on line 5:

       

      public function endDateSkipper(event:FocusEvent):void {
        if(endDate.text != "" && event.relatedObject.parent == endDate) {
          stage.focus = endTime;
        }
      }
      
      public function endDateAutofill():void {
        endDate.text = startDate.text;
      }
      

       

      So I fill in a valid date in the startDate field, and press tab.  The endDate field fills in with the same date, as expected.  Now I'm in the startTime field.  I enter a time, say 1230 (it doesn't matter what I put here) and press tab again, which should take me to the endTime field, skipping over the endDate field.  What happens is, the blue highlight shows up around the endTime field, and the it looks like that's the input that has focus.  It has the blinking "caret" or "cursor" or whatever you call it that indicates "ready to type".  However, there is also a blinking caret in the endDate field at the same time.  So it looks like both fields have focus simultaneously.  If I hit the delete button, the numbers in the endTime field are deleted, but if I hit the backspace button, the caret moves in the endDate field, though it doesn't actually erase anything.

       

      See an example of this at:  http://justin.dailyman5000.com/flex/

       

      Any idea what I'm doing wrong?

        • 1. Re: MaskedTextInput:  Multiple Simultaneous Focus Points
          Justin Daily Level 1

          Nothing at all?  No ideas?  Do you guys need more information from me or what?  Still can't figure this one out...

          • 2. Re: MaskedTextInput:  Multiple Simultaneous Focus Points
            Shongrunden Adobe Employee

            Pure guess on my part, but I'm curious if using endTime.setFocus() instead of stage.focus = endTime works better?

            • 3. Re: MaskedTextInput:  Multiple Simultaneous Focus Points
              Justin Daily Level 1

              I've actually tried both ways, and they both produce the same effect.

              • 4. Re: MaskedTextInput:  Multiple Simultaneous Focus Points
                Shongrunden Adobe Employee

                Can you post a small, complete code sample that reproduces this?

                • 5. Re: MaskedTextInput:  Multiple Simultaneous Focus Points
                  Justin Daily Level 1

                  There's an example posted at http://justin.dailyman5000.com/flex/ if you want to see it in action without having to compile it.  Here's the complete application:

                   

                  <?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"
                                 xmlns:mask="com.adobe.flex.extras.controls.*" width="550" height="400" 
                                 viewSourceURL="srcview/index.html">
                      <fx:Declarations>
                          <mx:DateFormatter id="dateformatter" formatString="MM/DD/YYYY"/>
                          <mx:DateValidator id="datevalidator" property="fullText" inputFormat="MM/DD/YYYY" />
                      </fx:Declarations>
                      
                      <fx:Script>
                          <![CDATA[
                              public function endDateSkipper(event:FocusEvent):void {
                                  if(endDate.text != "" && event.relatedObject.parent == endDate) {
                                      stage.focus = endTime;
                                  }
                              }
                              
                              public function endDateAutofill():void {
                                  endDate.text = startDate.text;
                              }
                          ]]>
                      </fx:Script>
                      
                      <s:Label text="Start Date" x="20" y="28"/>
                      <mask:MaskedTextInput id="startDate" inputMask="MM/DD/YYYY" restrict="0-9/"
                                            maxChars="10" focusOut="endDateAutofill()" x="120" y="28"/>
                      <s:Label text="Start Time" x="20" y="73"/>
                      <s:TextInput id="startTime" focusOut="endDateSkipper(event)" x="120" y="73"/>
                      <s:Label text="End Date" x="20" y="118"/>
                      <mask:MaskedTextInput id="endDate" inputMask="MM/DD/YYYY" restrict="0-9/"
                                            maxChars="10" x="120" y="119"/>
                      <s:Label text="End Time" x="20" y="164"/>
                      <s:TextInput id="endTime" x="120" y="164"/>
                  </s:Application>
                  

                   

                  Also, the SWF file uses the MaskedTextInput plugin (SWC file) so be sure that you add that into your project in Flash Builder.  I am using the version that I downloaded from the Adobe Exchange.

                  • 6. Re: MaskedTextInput:  Multiple Simultaneous Focus Points
                    Shongrunden Adobe Employee

                    Are you able to reproduce this without using the MaskedTextInput component?

                    • 7. Re: MaskedTextInput:  Multiple Simultaneous Focus Points
                      Justin Daily Level 1

                      No, if I switch to using a plain text input, it works fine.  But, I'd really like to use the Masked Text Input if at all possible.  I've built other similar apps that used the MaskedTextInput (though I've never tried to programatically "skip" one of them before) and I'd like this one to be consistent in design with the other ones.