using setFocus() method to bring focus to a Textinput control.

To bring focus to a TextInput control in flex we can use a method called setFocus().

ex: textinputreference.setFocus();

This will bring the focus to the TextInput of id “textinputreference”.

check the below example.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”
http://www.adobe.com/2006/mxml
layout=”absolute” creationComplete=”fnInit()”>

<mx:Script>
<![CDATA[
private function fnInit():void
{
txtInp.setFocus();
}
]]>
</mx:Script>
<mx:TextInput id=”txtInp” x=”381″ y=”206″/>
</mx:Application>

Updated ::

[showmyads]

For the above code to work we need to send the focus of the Flex App to the Flash Player with some Java Script methods,by default it does not send the focus untill unless you click on the App.

Code:

//The below code go in to the <script /> tag in your HTML file.

function setFlexAppFocus()
{
getFlexAppMovieObject(‘TextInputFocus’).focus();//TextInputFocus is id in <object> tag in you HTML file.
}
function getFlexAppMovieObject(movieName)
{
if (window.document[movieName])
{
return window.document[movieName];
}
if (navigator.appName.indexOf(“Microsoft Internet”)==-1)
{
if (document.embeds && document.embeds[movieName])
{
return document.embeds[movieName];
}
}
else
{
return document.getElementById(movieName);
}
}

//The below line is your <body> tag in your HTML file.

<body scroll=”no” onload=”setFlexAppFocus()”>

Enjoy the post.

19 Responses to using setFocus() method to bring focus to a Textinput control.

  1. wallville says:

    This does not put the cursor into the field, it only sets the focus into the field. does anyone know how to load an application and place a cursor into a specific text field on creationComplete?

  2. joss says:

    I’m having the same issue. the focus is ‘drawn around a text input filed but you cannot write into it. (I’m also havign a problem where you cannot click on teh field and hten write into it so there may be some other problem at work here.)

    however, i am also having trouble setting focus to teh first of a group of radio buttons or checkboxes.

    • kumargandhi says:

      Hi,

      To resolve this problem we got to get the focus.Use this line addedToStage=”stage.focus=null;” , it will bring the focus to the current stage and sets the focus.Like if the Textfield is in TitleWindow so add this line to the TitleWindow.

      regards,
      kumar.

  3. Alexwebmaster says:

    Hello webmaster
    I would like to share with you a link to your site
    write me here preonrelt@mail.ru

  4. Steven Rieger says:

    I’m still struggling with the focus issue.

    Trying all your suggestions still not working. Also using Firefox. Here is my code. . .

    Can you help?

  5. Aruna says:

    Hi

    Please let me know the solution!
    I tried as u said, its not working 😦

    Thanks
    Aruna

  6. Craig says:

    Howzit all
    I came across this error as well
    after some searching found out that it is logged
    as a bug in Adobe but they have a work around:
    http://bugs.adobe.com/jira/browse/SDK-15319
    use the callLater() function
    with some tweaking i got this method to work for me

    I use it on a textInput field’s focusOut, if it fails a RegExp test, i set some vars, and on a focusIn method checks if the previous field failed, then the method sets focus back to the previous textInput as well as show an errorString. I made the focusIn and focusOut methods dynamic, so i use it over on all my required fields

    hopefully this helps

    here’s my code example:

    //mValidation is a Boolean
    //lPreviousItem is a String

    private function checkFocusInAmount(field:Event)
    :void {
    if(!mValidationError) {
    var lText:String = field.currentTarget.text;
    if(Number(lText) == 0) {
    field.currentTarget.text = “”;
    }
    }
    else {
    callLater(
    field.currentTarget.focusManager.setFocus
    [this[mPreviousItem]]);
    }
    }

    private function checkFocusOutAmount(field:Event)
    :void {
    var lText:String = field.currentTarget.text;
    var lTest:RegExp = /^[0-9]+([.][0-9]{1,2})?$/;

    if(lText == “”) {
    field.currentTarget.text = “0.00”;
    }
    else {
    if(lTest.test(lText)) {
    field.currentTarget.text =
    Number(lText).toFixed(2);
    field.currentTarget.errorString = ”;
    mValidationError = false;
    }
    else {
    field.currentTarget.errorString =
    ‘Amount is in the incorrect format.
    nOnly an Amount with up to 2 decimal
    places allowed.nAmount format: #.##’;

    mValidationError = true;
    mPreviousItem = field.currentTarget.id;
    }
    }
    }

  7. Craig says:

    sorry my code doesn’t look very neat, should still be readable

    • Jeff says:

      Craig, the strategy that you suggest does not work.
      The reason being is. When focus is given to the previous field, if the current field does not
      have data in it, it will also fail the validation
      test. This will create a cycle between
      to the two respective text fields.

  8. Tong Wang says:

    This does not work: it only highlights around the textbox, but you can’t type in it as it doesn’t have a cursor in it.

    Adding that stage.focus trick made things worse: text box is not even highlighted!

  9. Krishna says:

    Kumar,
    Where is the updated code that you have put.

  10. Krishna says:

    Kumar,
    I guess the updated code isn’t there on the post

  11. mitch says:

    See also this post on FlexCoders. The question isn’t answered yet but other people are looking at it, on the Mac.

    http://tech.groups.yahoo.com/group/flexcoders/message/150145

  12. Reddy says:

    Hi Kumar,

    Nice post, but I am confused. Should the html code be written in a separate file or in the html-template folder’s file index.template.html?

    Can you be more specific as where that html code be written and how to embed that file into flex code if it is a separate file.

    Thank in advance
    Reddy

  13. Soumya Vinod says:

    Good post, appreciate your level of knowledge 🙂

  14. Shruti says:

    Hello,

    I am also having the problem that focus is just drawn around the textInput but the cursor is not set in the TextInput. Please tell me the solution for this. I tried stage.focus = null; but it also didn’t help.

Leave a comment