ホーム >> 左脳ActionScript3 >> アクションスクリプト3 >> TextFieldクラス >> 文字入力完了の検出
文字入力完了の検出
さて、文字列の入力にて、入力する方法は判りましたが、文字入力の完了はどのようにして知ればよいのでしょうか?
一般的なアプリケーションでは「文字を入力し、最後にリターンキーで〆る。」と言う流れが、入力作業の一般的認識でしょうか。

今までのコードでは、入力出来るだけで、データ入力の完了を検知する機能はありません。
つまり「入力されたキーがリターンキーかどうかを調べ、リターンキーだったら入力完了とみなす。」と言う コードを自力で書かなければならない事になります。


ここでは、イベントと言われる機構を使用します。Action Script では、マウスの操作、キーボードからの操作、 ファイルの読み込み完了通知、等様々な箇所でイベント機構が使われています。

TextField では、文字の入力が起こるとイベントが起き、その変化を通知する機能を持っています。 ユーザー側で、任意のイベントをキャッチ出来るように、イベント種別毎にイベント処理ルーチンを指定することが出来るのです。

flash.events.Event.CHANGE

TextField で発生する、Event.CHANGE を処理してみましょう。

Get Adobe Flash player
イベントサンプル。
「ここに入力」に何か入力してみて下さい。下部に入力したテキストのコピーがリアルタイムで反映される事が確認出来るはずです。

以下コード。addEventListenerが今回のイベント機能の実装のポイントとなります。
Flash develop のプロジェクト用as3ファイル(main.as)の内容。

package 
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.text.TextField;

    /**
     * ...
     * @author 
     */
    public class Main extends Sprite 
    {
        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }

        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point
            TextField_Test();
        }
        //--------------------------------------------------------------------
        //  TextField 文字入力検知テスト
        private var txt_input:TextField;    //  入力TextField
        private var txt_print:TextField;    //  表示TextField
        //  画面構成の初期化
        private function TextField_Test():void 
        {
            //  入力TextField初期化
            txt_input   =   new TextField();
            txt_input.type  =   flash.text.TextFieldType.INPUT;
            txt_input.maxChars  =   10;
            txt_input.text  =   "ここに入力";
            addChild(txt_input);
            //  入力TextFieldのイベント「Event.CHANGE」の処理をルーチン「check_key」で行う指定。
            txt_input.addEventListener(Event.CHANGE, check_key);
            //  表示TextField初期化
            txt_print   =   new TextField();
            txt_print.y =   30;
            txt_print.selectable    =   false;
            addChild(txt_print);
        }
        //  イベント処理ルーチン
        private function check_key(e:Event):void 
        {   //  イベントの度に入力側のテキストを表示側にコピー
            txt_print.text  =   txt_input.text;
        }
    }
}
このコードで、文字列が変化した際にイベントを受け、リアルタイムで文字列に対してアクション出来る事が判りました。

しかし・・・リターンキー入力の判別は、上記の方法では実現出来ません。
リターンキーでは文字列が変化しない為、入力TextField の文字列が変化しないのです。 その為にEvent.CHANGEが発生しない事になります。



flash.events.KeyboardEvent.KEY_DOWN

TextField で発生する、KeyboardEvent.KEY_DOWN を処理してみましょう。

Get Adobe Flash player
イベントサンプル。「ここに入力」に何か入力してみて下さい。
先のテストと違い、コピーされるのはキー入力する前の文字列です。しかし、追加した状態表示の方(3行目)には、入力したキーの キーコードが入っているのが判るでしょうか。

リターンキーを押下すると、キーコード「13」が表示され、入力が完了した文字列が表示側(2行目)にコピーされています。

以下コード。以前のコードと良く比較して下さい。
イベント処理ルーチンで、e:KeyboardEventcharCodeプロパティを通じて、 入力された文字のキーコードを取得しています。

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.text.TextField;
	
	/**
	 * ...
	 * @author 
	 */
	public class Main extends Sprite 
	{
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			TextField_Test();
		}
		//--------------------------------------------------------------------
		//	TextField 文字入力検知テスト
		private var	txt_input:TextField;	//	入力TextField
		private var	txt_print:TextField;	//	表示TextField
		private var	txt_status:TextField;	//	状態表示TextField
		//	画面構成の初期化
		private function TextField_Test():void 
		{
			//	入力TextField初期化
			txt_input	=	new TextField();
			txt_input.type	=	flash.text.TextFieldType.INPUT;
			txt_input.maxChars	=	10;
			txt_input.text	=	"ここに入力";
			addChild(txt_input);
			//	入力TextFieldのイベント「KeyboardEvent.KEY_DOWN」の処理をルーチン「check_key」で行う指定。
			txt_input.addEventListener(KeyboardEvent.KEY_DOWN, check_key);
			//	表示TextField初期化
			txt_print	=	new TextField();
			txt_print.y	=	16;
			txt_print.selectable	=	false;
			addChild(txt_print);
			//	状態表示TextField初期化
			txt_status	=	new TextField();
			txt_status.y	=	32;
			txt_status.selectable	=	false;
			addChild(txt_status);
		}
		//	イベント処理ルーチン
		private function check_key(e:KeyboardEvent):void 
		{	//	イベントの度に入力側のテキストを表示側にコピー
			txt_print.text	=	txt_input.text;
			//	イベントで通知される「入力された文字コード」の表示
			txt_status.text	=	e.charCode.toString();
		}
	}
}
このコードで、文字列入力の完了(リターンキーの入力)を検知出来る事が判りました。
先のEvent.CHANGEのテストも無駄だった訳ではなく、入力中にリアルタイムで何かを作用させたいときに、応用する事が出来ると思います。


>> 複数行のテキストの入力へ。

トラックバック(0)

トラックバックURL: http://n-yagi.0r2.net/sanoupulurun/mt-tb.cgi/202

コメントする

ホーム >> 左脳ActionScript3 >> アクションスクリプト3 >> TextFieldクラス >> 文字入力完了の検出