Flex 3: Button click on Enter Key

Ok…this is one of those things that plagued me mentally because I blocked out possibilities. My main obstacle was in the approach. Should I add a key listener and check to see what field you’re in then have the appropriate buttons click event called? Nope…that sucks. Should I add a listener, to the _TextInput_ fields, for _keyUp_ or _keyDown_ and check to see if it was the _ENTER_ key? Nope…sucks too.

This wasn’t a big issue for me but I saw the question around a few times. Normally I had a situation where I was building a form and in that form you could assign a _defaultButton_ which would take care of calling the _click_ event for the _defaultButton_. That’s cool but using _Form_ means a vertical layout, right? WRONG! This is where I went wrong in my own mind.

I wrote this on (mental) stone tablets: “All display objects inside a _Form_ tag shall be _Formitem_ tags.” True but not. You can have a nice vertical form using _FormItem_ tags but sometimes you might not need all of the extra padding, etc that comes with _FormItem_’s and you might just want a _TextInput_ with a _Button_ to the right of it. Well, _Form_ is still your quick and easy answer.

bq. <mx:Form defaultButton=”{loadButton}”>
<mx:TextInput id=”feedURL” />
<mx:Button id=”loadButton” label=”Load” click=”someHandler(event)” />

That’s it. Now clicking _loadButton_ with the mouse or hitting the _ENTER_ key will call _someHandler_, _loadButton_’s _click_ event handler.

Hopefully this helps someone. Keep reading for a couple clarities.

1) I know _FormItem_ has a _direction_ property which has a _horizontal as one of the options so vertical layouts are not the only type you can achieve with a _Form_/_FormItem_ combination. If you look at the space/padding for the _label_ of a _FormItem_ it isn’t as clean as throwing the _Form_ in an _HBox_ or putting an _HBox_ as the first child in the _Form_.
2) There are scenarios, I’m sure…somewhere in the world, where a listener for the _ENTER_ key in a _TextInput_ is needed. I’m not bashing all scenarios…just the general one of assigning a default button.

That’s all of the clarities I think. :-) L8rz!

  • John Hall

    Absolutely awesome. I was playing with all sorts of listeners and it was working, but it was ugly. This is sooo simple. Add a form tag before all the fields, add an end tag at the end and it works perfectly. Thanks much!

  • John C. Bland II

    No sweat John. I’m glad it helped.

  • Matto

    This code was the best I could find for a quick solution. Thanks!

  • Dennis

    Great job. It works realy well. Thanks.
    Do you think it would be possible to do the same for a Datagrid.DoubleClick?

  • John C. Bland II

    Hrmmm…I doubt it. What are you attempting to accomplish exactly with the double click?

  • laxmi

    Great example. Worked well.

    The question I have is similar to what was asked above can doubleclicking on a row in a data grid allow me to display a form in a split panel layout.

    ex: Right now we would highlight the row in the data grid which would update the spilt panel with the information details for editing.

    Can we also double click on the row and get it to do the same thing.

  • John C. Bland II

    Yes, set doubleClickEnabled=”true” and listen for the doubleClick event. It should work just fine.

  • Tom

    Thank You!! This is exactly what I was looking for :)

    • http://www.johncblandii.com John C. Bland II

      No sweat Tom. Glad it helped. :-)

  • Trish

    This did not work quote right for me, because the mx:TitleWindow I was using did not have focus. This worked for me (without needing to use an mx:Form):

    this.focusManager.defaultButton = deleteBtn;

    • http://www.johncblandii.com John C. Bland II

      Interesting. I never looked into the focusManager but I probably wouldn’t use it unless it was in a pop-up of sorts. The reason being I wouldn’t want to have to force focus on a textinput within a page with multiple items to focus on. Then on focus off of any of the elements I’d have to remove the default button.

      Good to know though. Thanks for posting.

  • Rino Tom Thomas

    This is good and works for me also.
    but the question still with me is that, for a page with more than one button how can we invoke an event on pressing Enter key in case the user selects a button using the tabs.

    • http://www.johncblandii.com johncblandii

      If I understand you correctly, you could just change the default button per tab change or just move the button(s) out of the tab(s) and make it a \”global\” button [maybe below the tabs or something].

  • http://intensedebate.com/people/johncblandii johncblandii

    I'm not 100% sure what you mean but I believe you mean the user tabs to different buttons and you want a key to select that button, right? If so, the spacebar is the key to trigger a button click.

    If you wanted the enter key for different buttons or fields you could listen for the focus in/out of the buttons/fields then change the surrounding forms defaultButton.

  • http://www.koona.com Tomas Sancio

    Hey, thanks for the tip regarding defaultButton. Found out that each TitleWindow has one, too.

    • http://intensedebate.com/people/johncblandii johncblandii

      Nice! I don't recall the TitleWindow having one but that is good info.

      Sent from iPhone 3G

  • Kotireddy

    Its very good. It saved my time.

  • http://www.ishandave.blogspot.com ishan

    Hi, Thank you for sharing, this is what I m looking for. Thank you very much !
    With best regards,
    Ishan Dave

  • navneet


    I am adding a Text Area as a child upon hitting enter key on button. The button works fine on enter key but i am not able to stop the event and it leads to a default enter key inside the text area. I tried using event.stopimmediatepropagation as well but didnt work. Please guide.

    • http://www.johncblandii.com John C. Bland II

      Serious apologies. Sparrow wasn’t showing me this as unread so had to switch back to Mail. Anyways!

      I think you’ll have to trap the key presses and stop the textarea from changing the values. So maybe setup your own textarea class extending s:TextArea and stop propagation on text change if it is the enter key.

      The other way is a visual trick making it a textarea but really it is a larger, multiline textfield or richtext.