[Flex3]ボタンをEnterキーでも押下できるようにする

ボタンにフォーカスがある時、スペースキー(IMEオフのとき限定)を押下した際に、ボタンのクリックイベントが呼ばれます。

これをEnterキーでも押下できるようにしたいと考え、Buttonクラスを拡張して以下のCstmButtonクラスを作成してみました。

CstmButton.asファイル

package
{
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
	
	import mx.controls.Button;

	public class CstmButton extends Button
	{
		public function CstmButton()
		{
			super();
		}
		
		override protected function keyDownHandler(event:KeyboardEvent):void
		{
	        if (event.keyCode == Keyboard.ENTER)
                event.keyCode = Keyboard.SPACE;
			super.keyDownHandler(event);
		}
	    override protected function keyUpHandler(event:KeyboardEvent):void
	    {
	        if (event.keyCode == Keyboard.ENTER)
                event.keyCode = Keyboard.SPACE;
            
            super.keyUpHandler(event);
	    }
		
	}
}

ソースコードを読んでもらえばわかるとは思いますが、この方法はかなりお手軽な方法(手抜き)です。
CstmButtonクラスの中身は、キーが押されたときに呼ばれているクラス(KeyboardEvent)内で、Enterキーが押されたときに呼ばれるメソッド(keyDownHandler)、離されたときに呼ばれるメソッド(keyUpHandler)をそれぞれオーバーライドして、パラメータで渡されたイベントクラス内の押されたキーの情報(keyCode)を、EnterキーからSpaceキーのKeyCodeに置き換えてからsuper()を呼んでます。

CstmButtonクラスの継承元であるButtonクラスのkeyDownHandlerメソッド、keyUpHandlerメソッドでは、押されたキー(keyCode)をみてSpaceキーの場合に処理が動いているので、Enterキー押下時にSpaceキーに置き換えることで、Enterキーでもボタンが押せるようになります。

 

以下、上記クラスを検証するためのサンプルソースです。

 .mxmlファイル

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" horizontalAlign="left">
	<mx:Script>
	<[CDATA[
		import mx.controls.Alert;
		
		private function checkClicked():void{
			Alert.show("反応!");
		}
	]]>
	</mx:Script>

	<local:CstmButton label="カスタム" click="checkClicked()"/>
	<mx:Button label="普通" click="checkClicked()"/>
</mx:Application>

※ サンプルソースでは、ボタンが押されたという反応を確認するため、clickイベントを追加してます

このブログについて

このブログは吉祥寺にあるブレインチャイルド株式会社の社員で投稿しています。
業務ではまってしまったことや発見したこと。
自分達で新たに学習してみようと思って勉強し始めたことなどを綴っています。
こんな社員が働いているブレインチャイルドに興味がわいててきたなら、是非お問い合わせください。
会社案内
求人案内
先輩のコメント