Flex（AS 3.0）实现快捷键功能--监听键盘事件

    实现快捷键的功能其实很简单，就是监听键盘事件，再检测是按下或弹起了哪个键，然后做对应的操作就可以了。如果要实现一般的组合键（指一般的数字和字母的组合或上下左右键的组合）也不难，但是如果想要在网页中打开的swf文件中实现特殊点的组合键（比如：Ctrl+Shift+Alt+其他基本键）就可能有问题，因为浏览器本身可能已经占用了某些这种快捷键（比如在IE 7 中 Ctrl+数字键 表示切换已打开的选项卡）。在这里我只实现简单的情况，其他的应用可以自己用到时再做改进。

 

    建立一个Flex project 工程，名称叫“ShortCutTest”，步骤就不说了，直接上代码吧：

文件 ShortCutTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="appComplete();" 
    fontSize="12">

    <mx:Script>
       <![CDATA[
           import mx.controls.Alert;
        import flash.events.KeyboardEvent;
       
        private function appComplete():void
        {
            this.stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHander);
            this.stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHander);
        }
    
        private function keyDownHander(event:KeyboardEvent):void
        {
            if(maskInput())
            {
                return ;
            }
        }
        private function keyUpHander(event:KeyboardEvent):void
        {
            if(maskInput())
            {
                return ;
            }
            //检测按键事件
            keyDownCheck(event);
        }
        
           /**
         * 屏蔽所有的输入焦点
         * 防止在输入框中输入内容时会触发相应的快捷键操作
         */
        private function maskInput():Boolean
        {
            var focusObj:Object = Object(focusManager.getFocus());
            var focusName:String = focusObj.className;
            if(focusName=="TextArea"||focusName=="TextInput")
            {
                if(focusObj.editable==true)
                {
                    return true;
                }
            }
            return false;
    
        }
        
        /**
         * 检测按键事件
         */
        private function keyDownCheck(event:KeyboardEvent):void
        {
            switch(event.keyCode)
            {
                case 49:    //左边的数字1
                case 97:    //小键盘的数字1
                    useShortCutKey(1);
                    break;
                case 50:    //左边的数字2
                case 98:    //小键盘的数字2
                    useShortCutKey(2);
                    break;
                default:
                    break;
            }
            
            
        }
        
        private function useShortCutKey(index:int):void
        {
//            Alert.show("你现在使用的是快捷键："+index+",你可以再此添加你自己的函数了！");
            sendText(index);
        }
        private function sendText(index:int):void
        {
            if(index==1)
            {
                txt_show.text = "index:"+index.toString()+txt_TextInput.text+"---"+txt_input1.text;
            }
            else if(index==2)
            {
                txt_show.text = "index:"+index.toString()+txt_TextInput.text+"---"+txt_input2.text;
            }
        }
       ]]>
    </mx:Script>
    <mx:Label x="142" y="100" text="显示区域"/>
    <mx:TextArea id="txt_show" editable="false" x="142" y="123" width="437" height="86"/>
    <mx:Label x="142" y="220" text="TextArea 输入框"/>
    <mx:TextArea id="txt_TextInput" x="142" y="244" width="437" height="76"/>
    <mx:Label x="142" y="350" text="TextInput 输入框 1"/>
    <mx:TextInput id="txt_input1" x="280" y="348"  width="244"/>
    <mx:Label x="142" y="390" text="TextInput 输入框 2"/>
    <mx:TextInput id="txt_input2" x="280" y="388"  width="244"/>
    <mx:Button id="btn_send1" click="sendText(1)" x="545" y="348" label="发送1"/>
    <mx:Button id="btn_send2" click="sendText(2)" x="545" y="388" label="发送2"/>
    
</mx:Application>

 

效果截图：