6 Replies Latest reply on Jun 23, 2007 6:16 PM by JericoC

    SetFocus in a control by default during pageload

    MahePya
      Hi,

      I am using flex builder 2.0. I want to setFocus on a textbox during pageload.

      I have tried to setocus on that control in the below two event's of a application object

      1. CreationComplete
      2. Activate

      But Cursor is not getting focus on that control after page load. When I have clicked the application
      using mouse then only that page is getting activation

      (Or)

      I have to press the tab to activate the page.

      Initially the browser controls(addressbar etc) are getting focus instead of webpage.

      How to overcome this issue. I want to setFocus after page loaded by Default on a particular control.


      Can anybody help me.


      Thanx in advance.


      With Regards,

      Mahendiran.K
        • 1. SetFocus in a control by default during pageload
          JohnLeger Level 1
          MahePya,

          First the credit goes to the gentlemen in the comments below. First, create a new folder in your Application called "actionScript". Then RIGHT CLICK the new folder you just created and create a NEW "ActionScript File". The FILENAME with my example must be "JavaScript", then click FINISH. Then COPY and PASTE the code below (please be sure to include the credit) and paste it into the JavaScript.as file you just created.

          STEP ONE: SELECT AND COPY THE CODE BELOW...
          /* JavaScript: A MXML component for embedding Javascript in container HTML
          * Author: Abdul Qabiz (abdulqabiz3@yahoo.com)
          * Date: June 16, 2006
          * Version: 0.1
          *
          * Copyright (c) 2006 Abdul Qabiz ( http://www.abdulqabiz.com)
          *
          * Permission is hereby granted, free of charge, to any person obtaining a
          * copy of this software and associated documentation files (the "Software"),
          * to deal in the Software without restriction, including without limitation
          * the rights to use, copy, modify, merge, publish, distribute, sublicense,
          * and/or sell copies of the Software, and to permit persons to whom the
          * Software is furnished to do so, subject to the following conditions:
          *
          * The above copyright notice and this permission notice shall be included in
          * all copies or substantial portions of the Software.
          *
          * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
          * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
          * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
          * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
          * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
          * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
          * DEALINGS IN THE SOFTWARE.
          */

          // This script sets the browser focus
          package actionScript
          {

          import flash.events.Event;
          import flash.events.EventDispatcher;
          import flash.net.*;
          import mx.core.IMXMLObject;

          [DefaultProperty("source")]

          public class JavaScript extends EventDispatcher implements IMXMLObject
          {

          private var _source:String;
          private var _initialized:Boolean;

          public function JavaScript()
          {

          }

          public function set source(value:String):void
          {
          if (value!=null)
          {
          _source = value;
          var u:URLRequest = new URLRequest ("javascript:eval('" + value + "');");
          navigateToURL(u,"_self");
          }
          }

          public function initialized(document:Object, id:String):void
          {
          _initialized = true;
          }

          }

          }
          STEP ONE: SELECT AND COPY END JUST ABOVE HERE!!!



          Then SELECT and COPY the following code and PASTE it into the opening tag of the mxml file that has the TextBox that you want to give focus. Fore example if the TextBox is in your main Application, then it should go into the opening tag of that file. If the TextBox is in a separate component it should go into the opening tag of that component. Here's the code...

          STEP TWO: SELECT AND COPY THE CODE BELOW...
          xmlns:actionScript="actionScript.*"
          creationComplete="setBrowserFocus();"
          STEP TWO: SELECT AND COPY END JUST ABOVE HERE!!!




          Next SELECT and COPY the code below and PASTE it just after the opening tag where your TextBox is located. Again if your TextBox is located in your main Application file then simply PASTE this code right after the the close of the Application tag. If your TextBox is located in a different mxml file then place the code after the opening tag in that file.

          STEP THREE: SELECT AND COPY THE CODE BELOW...
          <mx:Script>
          <![CDATA[
          import flash.external.ExternalInterface;

          private function setBrowserFocus():void
          {
          ExternalInterface.call ("setBrowserFocus");
          usernameTextBox.setFocus()
          }

          ]]>
          </mx:Script>

          <actionScript:JavaScript>
          <![CDATA[
          function setBrowserFocus()
          {
          Main.focus();
          }
          ]]>
          </actionScript:JavaScript>
          STEP THREE: SELECT AND COPY END JUST ABOVE HERE!!!




          The next step is to CHANGE the ID "usernameTextBox" in the setBrowserFocus function to YOUR TextBox ID and it should work. :)

          STEP FOUR: CHANGE usernameTextBox TO YOUR TEXTBOX ID (for example)
          private function setBrowserFocus():void
          {
          ExternalInterface.call ("setBrowserFocus");
          usernameTextBox.setFocus() ***CHANGE "usernameTextBox"***
          }
          STEP FOUR ENDS



          The final step is to CHANGE the name to the name of Application as shown below.

          STEP FIVE: CHANGE "Main" TO THE NAME OF YOU APPLICATION
          <actionScript:JavaScript>
          <![CDATA[
          function setBrowserFocus()
          {
          Main.focus(); ***CHANGE "Main" to the name of you Application***

          }
          ]]>
          </actionScript:JavaScript>
          STEP FIVE ENDS



          Let me know how this works for you. Be sure to click the "Mark as the answer!" link in my post if this is the correct solution. Be sure to check out the author link to see why we have to set the focus this way.

          John
          • 2. Re: SetFocus in a control by default during pageload
            ntsiii Level 3
            Are you running you app via the generated .html wrapper file, or are you calling the .swf directly? Javascript in the 2.0 html wrapper should take care of this for you.

            Tracy
            • 3. Re: SetFocus in a control by default during pageload
              MahePya Level 1
              Dear JohnLeger ,

              I am extremely happy. This method has solved my problem. Thanks for your kind reply.

              Once again thanx a lot.

              With Regards,
              Mahendiran.K
              • 4. Re: SetFocus in a control by default during pageload
                MahePya Level 1
                Dear ntsiii,

                Thanx for your kind reply

                I am running my application via the generated .html wrapper file only. Mr. JohnLeger's answer has solved my problem.

                With Regards,
                Mahendiran.K

                • 5. Re: SetFocus in a control by default during pageload
                  JohnLeger Level 1
                  MahePya,

                  You are very welcome! I enjoy trying to figure out other people's problems to come up with viable working solutions.

                  Have fun FLEXing!

                  John
                  • 6. Re: SetFocus in a control by default during pageload
                    JericoC
                    The solution above works to set the focus of the control, but the cursor is not focused on the control. So the TextInput is highlighted like it is focused, but the user can not start typing into that control without tabbing or using the mouse.

                    Any ideas on that?