Auto select TextInput (FormItem)?

Question

I have a login form consisting of a Form with two TextInput's. I want the Form, or the username TextInput field to be automatically selected when the user enters, so he does not have to left click the TextInput field before entering his username. Do anyone know how i can achieve this?

<mx:Form x="223" y="186" defaultButton="{submitButton}">
    <mx:FormItem label="Username">
        <mx:TextInput id="userName"/>
    </mx:FormItem>
    <mx:FormItem label="Password">
        <mx:TextInput id="password" displayAsPassword="true"/>  
    </mx:FormItem>
    <mx:FormItem>
        <mx:Button id="submitButton" label="Login" click="submitLogin()"/>
    </mx:FormItem>
</mx:Form>

You need to set focus for it. Check this out: http://blog.flexexamples.com/2008/09/23/setting-focus-in-flex-using-the-focus-manager/ — Jevgenij Dmitrijev, Jun 25 '12 at 07:53
As I've commented on @Thinhbk 's answer, setting focus isn't going to be sufficient for a login box. Read this: http://stackoverflow.com/questions/8643079/setfocus-in-flex/8657202#8657202 — RIAstar, Jun 25 '12 at 08:47

score 2 · Accepted Answer · edited Jun 25 '12 at 08:11

2

Try to use:

focusManager.setFocus(userName);

edited Jun 25 '12 at 08:11

Pranav Hosangadi

23,755
7
44
70

answered Jun 25 '12 at 07:57

Thinhbk

2,194
1
23
34

1

If it's a login box, that's going to be insufficient, since the Flash Player doesn't have focus in the HTML page yet. – RIAstar Jun 25 '12 at 08:35
In that case, try to use this approach : http://stackoverflow.com/questions/4936058/flex-air-how-to-set-focus-on-a-ui-control-button-etc – Thinhbk Jun 25 '12 at 08:47
Sorry for the late reply and thank you for your help. The userName TextInput gets focus and is highlighted, but I still cant write directly into it without clicking it. Anyone know why? – Sebastian Jun 25 '12 at 10:46
Ahhh, i guess the reason why it doesnt work is what @RIAstar said? Ill check out the tutorial now :) – Sebastian Jun 25 '12 at 10:58
@RIAstar : I get this error "TypeError: el is null" When i attempt to use the Farata solution. I tried replacing the "%objectID%" with "prima" the id I defined in my index.html file but with no luck – Sebastian Jun 25 '12 at 11:19
1

@Sebastian: try this approach: http://www.webappsolution.com/wordpress/2010/08/31/set-flex-to-focus-on-application-load/ or in SOF: http://stackoverflow.com/questions/5745786/how-to-place-cursor-in-textinput-in-flex3 – Thinhbk Jun 25 '12 at 11:33
1

@Sebastian Are you embedding it with swfObject? Try embedding that JS function directly into the page (with the "%objectID%" token replaced of course) and see what happens if you call it from the console. Also, are you on Safari? They say the solution doesn't work on Safari yet. – RIAstar Jun 25 '12 at 11:39
1

@Thinhbk If the OP's on Safari the issue will probably remain: `NOTE: This will not work in Safari, Chrome, or any other browser that leverages Webkit`. Some fixes are suggested in the comments though – RIAstar Jun 25 '12 at 11:41
@RIAstar: I absolutely agree, the approach is just a work around for the situation. – Thinhbk Jun 25 '12 at 11:45
1

Thank you very much for your help to both of you! I dont know why i didn't get the Farata solution to work, but I got this solution to work: http://www.webappsolution.com/wordpress/2010/08/31/set-flex-to-focus-on-application-load/ – Sebastian Jun 25 '12 at 12:37

Auto select TextInput (FormItem)?

1 Answers1