Keyboard shortcuts for Flex UI components

Again someone on flexcoders wanted to assign keyboard shortcuts for UI components/controls in his application. Following was my response with quick and dirty example..
Suppose you want to assign some keyboard shortcuts to each
control on screen so that when shortcut key is pressed, control gets
focussed and pressing enter/space execute associated action. For example, pressing space key while a button is focussed, would be broadcast button’s click event.
You can easily achieve this by using Key object, as demonstrated in code later.
I am assuming:

  • user would press CTRL + 1, CTRL + 2 …to focus a control on screen.
  • user can press SPACE key to execute associated action with the controls
    like Button, CheckBox, RadioButton or any button kind of component.
  • user can use arrow keys to change values in list type of controls like
  • user can type in textfield like control….

Following example has some controls on screen and pressing CTRL + 1 .. CTRL
+ 5 shifts the focus to corresponding control….
Following code is quick & dirty and just for demo, you can always write a ShortcutManager class in very OO way, which is more easier to use and managable…

<mx:Application xmlns:mx="" initialize="initApp()">
	var keyListener:Object;
	function debugTrace(msg)
_ta.text+= msg + newline;
	function initApp()
keyListener = new Object();
keyListener.onKeyDown = mx.utils.Delegate.create(this, mx.utils.Delegate.create(this,shorcutHandler));
	function shorcutHandler()
var bControlPressed:Boolean = Key.isDown(Key.CONTROL);
if(bControlPressed) { //CTRL

if(Key.isDown(49)) { // 1
               	        debugTrace("CTRL + 1");
//set focus to textfield
}else if(Key.isDown(50)) { //2
                  		debugTrace("CTRL + 2");
//set focus to button
}else if(Key.isDown(51)) { //3
   	                    debugTrace("CTRL + 3");
}else if(Key.isDown(52)) { //4
   	                    debugTrace("CTRL + 4");
}else if(Key.isDown(53)) { //5
   	                   debugTrace("CTRL + 5");
<mx:TextInput id="my_input" focusIn="debugTrace('TextInput focussed')" change="debugTrace('TextInput value changed')"/>
<mx:Button label="Button" id="my_btn" focusIn="debugTrace('Button focussed')" click="debugTrace('button pressed')"/>
<mx:RadioButton label="radio" id="my_radio" focusIn="debugTrace('RadioButton focussed')" click="debugTrace('Radio button selected')"/>
<mx:CheckBox label="Checkbox" id="my_check"  focusIn="debugTrace('CheckBox focussed')" click="debugTrace('CheckBox change')"/>
<mx:ComboBox id="my_combo" focusIn="debugTrace('ComboBox focussed')" change="debugTrace('ComboBox selection changed')">
<mx:Label text="Debug Info:"/>
<mx:TextArea id="_ta" text="" width="200" height="200"/>
  • Thanks for sharing this simple and elegant code, works for me in my Flex 1.5 based app.

  • Hi
    I would like the above code (“Ctrl+1”) (Keyboard shortcuts for Flex UI components) to make it work on Flex2.0 too. Since Flex2.0 doesn’t have mx.utils.Delegate. Is there any alternate solutions for the above code?

  • Maryam

    I would like this code to work fine in flex 3..could somebody help me…?
    I’m trying to do smth like this but it doesn’t work in IE that takes precedences..would somebody help me to resolve this problem…?

  • Guest

    You can try this solution for Flex 2/3:

  • zied

    Thank you Maryam for the example, here is another example that works on flex 3:
    private function init():void{
    //your init code

    private function keyHandler(event:KeyboardEvent):void {
    var bCTRLPressed:Boolean = event.ctrlKey;
    if( bCTRLPressed){
    var curKeyCode:int = event.keyCode;
    //CTRL + S pressed; saveCall()
    if(curKeyCode==78 ){
    //CTRL + N pressed; NewEntryCall()
    if(curKeyCode == 68){
    //CTRL + D pressed; DeleteEntryCall()
    if(curKeyCode == 67){
    //CTRL + C pressed; CopyCall()
    if(curKeyCode == 70){
    //CTRL + F pressed; SearchCall()

    • perjabs

      Hi, I am Prasad, I am trying to implement your code, But the CTRL F & CTRL S is not triggering. Code below and Let me know your feedback. I am Using sdk 3.3 & flash player 10.

  • Anders

    Instead of using

    var bCTRLPressed:Boolean = event.ctrlKey;
    if( bCTRLPressed){
    var curKeyCode:int = event.keyCode;
    //CTRL + S pressed; saveCall()

    You could just use the following:

    private function keyHandler(event:KeyboardEvent):void {
    var curKeyCode:int = event.keyCode;
    //CTRL + N pressed;

    No need to check if CTRL is pressed, unless you really need to react on a CTRL keypress alone.

    CTRL + [x] does have its own keyCode, ex:
    CTRL + A = 1
    CTRL + B = 2
    CTRL + C = 3

    ALT + A = 197
    ALT + B = 166
    ALT + C = 199

    A = 65
    B = 66
    C = 67

    Happy coding…

  • thank for the script 😉
    I use the script of zied and work correctly

    • Prasad

      Ihave tried the ZIED code, Its not working. Can any one help me. My Sample Code attached.

  • Rameshkaveti9

    i tried this one but it’s not getting the out put plz help me here is my code

    var bCTRLPressed:Boolean = event.altKey;

    if( bCTRLPressed)

    var curKeyCode:int = event.keyCode;



    I am using Flex3 and flashplayer 10