Capturing keyboard events in Flex

Posted by: Yogesh Puri on: June 2, 2008

• In: Actionscript 3.0
• Comment!

This is a small code in flex /AS3 to demonstrate how you can capture the keyboard events in Flex. The application invokes init() method once the creation of form is completed.

The init() method have two lines of code. The first line is for making sure that once the user click on stage the focus should go onto the application (NOTE: you can modify it to a particular object based incase you want to enable key trapping once an object is selected). Next line adds the listener to keyEvents so once the keyboardEvent triggers the “keyPressed()” method will be invoked.

The functionality of keyPressed method is to check which key is pressed. Here I am trapping a combination of control (CTRL) and “A” or “B” key. There keyboardevents provides you information about if any special key i.e. CTRL / SHIFT is pressed along with another keys. So it makes easy to capture the combination of key.

Note: There is an important aspect you need to take care of while going with keyboard combinations. The operating system and the web browser will process keyboard events before Adobe Flash Player or AIR. For example, in Microsoft Internet Explorer, pressing Ctrl+B the browser window will open the bookmark window before any contained SWF file dispatches a keyboard event. So in this case you may not find the desired behavior. To overcome this you can use javascript as an option or use a different combination of keys.

Here is the test code.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute" creationComplete="init()">

 <mx:Script>

 <![CDATA[

    private function init():void{

     this.addEventListener(MouseEvent.CLICK, clickHandler);

     this.addEventListener(KeyboardEvent.KEY_DOWN,keyPressed);

    }

    private function clickHandler(event:MouseEvent):void {

      stage.focus = this;

    }

    private function keyPressed(evt:KeyboardEvent):void{

       if(evt.ctrlKey && evt.keyCode == 65)

             trace("CTRL A is pressed");

       if(evt.ctrlKey && evt.keyCode == 66)

             trace("CTRL B is pressed");

   }

 ]]>

 </mx:Script>

</mx:Application>

Tags: AS3 keyboardevent, CTRL+key combination, Flex keyboard capture, flex keyboardevent