【AIR & Flex3】 Enter To Tab ( Enter キーで次のコントロールへ移動 )

  カスタムコンポーネントで実装



↓Web 版デモ


ひとつひとつのコントロールに対して記述するのもいいですが、
カスタムコントロールにしたほうがすっきりします。

コントロールは、それそれフォーカスをコントロールする FocusManager を持っていますので、
そこから次に移動すべきコントロールを取得できます。

入力可能なコントロールでは Enter キーに関して専用イベントがあるのでそれを使います。
他のコントロールでは、keyUp で keyCode == 13 で処理すると良いでしょう。
( もちろんこれ以外の機能も実装して、より快適なアプリケーション支援を行なって行きます )

LboxText.mxml
  
<?xml version="1.0" encoding="utf-8"?>
<mx:TextInput
	xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="initControl(event)"
	xmlns="*"
>

<mx:Script>
<![CDATA[

	import mx.managers.*;
	import mx.events.*;

	// *****************************************************
	// 初期処理
	// *****************************************************
	private function initControl(e:FlexEvent):void {

		// イベント追加
		this.addEventListener(FlexEvent.ENTER, focusControl);

	}

	// *************************************************
	// ENTER to TAB
	// *************************************************
	private function focusControl(event:FlexEvent):void{

		var fm:FocusManager = FocusManager(this.focusManager);
		var target:Object = fm.getNextFocusManagerComponent();
		target.setFocus();

	}

]]>
</mx:Script>

</mx:TextInput>
  



  Mainw.mxml ( ソースコード )



初期フォーカスについては、windowComplete を使用していますが、initialize でタイマーを使って
も良いと思います。実際問題、タイマーを使わないといろいろなコントロールは不可能ですし、
処理はできるだけ一箇所にまとめたほうが良い場合が多いからです。

WEB 用の Application コンポーネントでは、初期フォーカス設定でキャレットを表示するには、
swf がそのドキュメント内でフォーカスを前もって持っておく必要があります。

↓WEB 版のソースの先頭
  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="initData();"
	applicationComplete="initShown();"
	xmlns="*"
>
  
↓WEB 用実行 HTML
  
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE>デバッグ用</TITLE>
<STYLE type="text/css">
* {
	font-family: "MS Pゴシック";
	font-size: 12px;
}
BODY {
	background-color: white;
	color: black;
}
</STYLE>
<SCRIPT 
	language="javascript"
	type="text/javascript"
	src="http://homepage2.nifty.com/lightbox/firebug/firebug.js">
</SCRIPT>
<SCRIPT 
	language="javascript"
	type="text/javascript"
	src="http://homepage2.nifty.com/lightbox/swfobject.js">
</SCRIPT>
</HEAD>

<!-- *******************************************************
 BODY
******************************************************** -->
<BODY>

<DIV id="flashcontent" style='display:inline'></DIV>
<script type="text/javascript">
	var so = new SWFObject(
		"Main.swf?reload=" + (new Date()).getTime(),
		 "idswf", "520", "350", "9", "#FFFFFF");

	so.write("flashcontent");

	document.getElementById("idswf").focus();
</script>

</BODY>
</HTML>
  


↓AIR 版ソース
  
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
	xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="initData();"
	windowComplete="initShown();"
	xmlns="*"
>

<mx:Style>

	.labelAlign {
		textAlign: left;
	}
	.testButton {
		fillColors: #5EBCDB,#FFFFFF;
	}

</mx:Style>

<mx:Script>
<![CDATA[

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	public function initData():void {

		// メッセージ
		trace( "initData()" );

	}

	// *********************************************************
	// 表示後の初期化
	// *********************************************************
	public function initShown():void {

		// 初期のフォーカス
		act1.setFocus();

	}

]]>
</mx:Script>

<mx:Form width="90%" height="90%">
	<mx:FormHeading label="Enter To Tab のテスト"/>
	
	<mx:FormItem
		label="フィールド1"
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<!-- ****************************************** -->
		<!-- ユーザフィールド -->
		<!-- ****************************************** -->
		<LboxText
			id="act1" 
		/>
	</mx:FormItem>
	<mx:FormItem
		label="フィールド2"
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<!-- ****************************************** -->
		<!-- ユーザフィールド -->
		<!-- ****************************************** -->
		<LboxText
			id="act2" 
		/>
	</mx:FormItem>
	<mx:FormItem
		label="フィールド3"
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<!-- ****************************************** -->
		<!-- ユーザフィールド -->
		<!-- ****************************************** -->
		<LboxText
			id="act3" 
		/>
	</mx:FormItem>

</mx:Form>

</mx:WindowedApplication>
  











  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ