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

【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: "ＭＳ Ｐゴシック";
	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サービス

フリーフォントで簡単ロゴ作成

アイコン・はんこ画像作成

フリーフォントで横書きロゴ作成

フリーフォントで縦書きロゴ作成

フリーフォントでボタン素材作成

フリーフォントで吹き出し素材作成

フリーフォントで PDF 作成

デュアルフォント

フリーフォント配布サイト

キーボード画像作成

フリーフォントギャラリー

イラストACよりフリーダウンロード

UTF-8文字Tool

SQLの窓WEBサービス

リアルタイムHTML

テキスト変換

ストリートビューとMAPのコード

SyntaxHighlighter

Shadowbox 埋め込みコード作成

SQLの窓フリーソフト

SQLの窓 Build C++

「送る」に入れる簡易ダンプ

コンピュータアイコンメニュー

ドメイン内検索

素材

イラスト素材サイト

一般WEBツールリンク

WEB アーカイブ

疑わしいファイルや URL を分析する

HTML整形ツール

ttf to woff converter

Twitter Card validator

Google URL Shortener

SQLの窓

logical　error

職人的フリーソフトの使い方

ソース掲示板

フリーソフト

PrimoPDF(英語版)

JSライブラリ

The Google Hosted Libraries