一般的なアプリケーションでは「文字を入力し、最後にリターンキーで〆る。」と言う流れが、入力作業の一般的認識でしょうか。
今までのコードでは、入力出来るだけで、データ入力の完了を検知する機能はありません。
つまり「入力されたキーがリターンキーかどうかを調べ、リターンキーだったら入力完了とみなす。」と言う コードを自力で書かなければならない事になります。
ここでは、イベントと言われる機構を使用します。Action Script では、マウスの操作、キーボードからの操作、 ファイルの読み込み完了通知、等様々な箇所でイベント機構が使われています。
TextField では、文字の入力が起こるとイベントが起き、その変化を通知する機能を持っています。 ユーザー側で、任意のイベントをキャッチ出来るように、イベント種別毎にイベント処理ルーチンを指定することが出来るのです。
flash.events.Event.CHANGE
TextField で発生する、Event.CHANGE を処理してみましょう。
「ここに入力」に何か入力してみて下さい。下部に入力したテキストのコピーがリアルタイムで反映される事が確認出来るはずです。
以下コード。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 を処理してみましょう。先のテストと違い、コピーされるのはキー入力する前の文字列です。しかし、追加した状態表示の方（3行目）には、入力したキーの キーコードが入っているのが判るでしょうか。
リターンキーを押下すると、キーコード「13」が表示され、入力が完了した文字列が表示側（2行目）にコピーされています。
以下コード。以前のコードと良く比較して下さい。
イベント処理ルーチンで、e:KeyboardEvent の charCodeプロパティを通じて、 入力された文字のキーコードを取得しています。
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のテストも無駄だった訳ではなく、入力中にリアルタイムで何かを作用させたいときに、応用する事が出来ると思います。
>> 複数行のテキストの入力へ。
コメントする