TextField クラスについて
テキストフィールドとは?
■ TextField とは?
テキストフィールドは、文字を表示したり、文字を入力するためのクラスです。
■ TextField クラスの派生について
テキストフィールドは以下のクラスから派生しています。ここで解説してない分はリンク先に解説がありますので合わせてご覧下さい。
| Object |
| ↓派生 |
| EventDispatcher |
| ↓派生 |
| DisplayObject |
| ↓派生 |
| InteractiveObject |
| ↓派生 |
| TextField |
テキストフィールドを作成して配置する
サンプルをダウンロード
■テキストフィールドを作成する
まず、テキストフィールドクラスをインスタンス化します。
テキストフィールドインスタンスを作成する
// テキストフィールドオブジェクトを作成する
var text_field = new TextField();
■テキストフィールドを配置する
addChild() メソッドを使って表示リストに登録します。詳しくはこちら。
stage の表示リストに登録する
// テキストフィールドオブジェクトを作成する
var text_field = new TextField();
// 表示リストに登録する
stage.addChild(text_field);
テキストフィールドのサイズを変更したい場合は x , y , width , height プロパティを変更します。
テキストフィールドインスタンスを作成する
// テキストフィールドオブジェクトを作成する
var text_field = new TextField();
// 表示リストに登録する
stage.addChild(text_field);
text_field.border = true; // 枠を表示する
text_field.x = 50; // x 座標
text_field.y = 100; // y 座標
text_field.width = 200; // 幅
text_field.height = 20; // 高さ
テキストフィールドに文字を表示する
サンプルをダウンロード
■テキストフィールドに文字を表示する
テキストフィールドに文字を表示したい場合は text プロパティに文字を代入します。
テキストフィールドに文字を表示する
// テキストフィールドオブジェクトを作成する
var text_field = new TextField();
// 表示リストに登録する
stage.addChild(text_field);
// テキストフィールドの設定
text_field.border = true;
text_field.x = 50;
text_field.y = 100;
text_field.width = 200;
text_field.height = 20;
// 表示したいテキスト
text_field.text = "表示テスト";
■テキストフィールドにHTML形式の文字を表示する
HTML形式の文字を表示するには htmlText プロパティに文字を代入します。
テキストフィールドに文字を表示する
// テキストフィールドオブジェクトを作成する
var text_field = new TextField();
// 表示リストに登録する
stage.addChild(text_field);
// テキストフィールドの設定
text_field.border = true;
text_field.x = 50;
text_field.y = 100;
text_field.width = 200;
text_field.height = 20;
// 表示したいHTML文
text_field.htmlText = "<B>表示テスト</B>";
以下のタグとエンティティに対応しています。
| タグ | 説明 |
| <a> | アンカータグ |
| <b> | ボールドタグ |
| <br> | ブレークタグ |
| <font> | フォントタグ |
| <img> | イメージタグ |
| <i> | イタリックタグ |
| <li> | リスト項目タグ |
| <p> | 段落タグ |
| <span> CSS テキストスタイルでのみ使用 | 範囲タグ |
| <textformat> | テキストフォーマットタグ |
| <u> | 下線タグ |
| エンティティ | 説明 |
| < | < (より小さい) |
| > | > (より大きい) |
| & | & (アンパサンド) |
| " | " (二重引用符) |
| ' | ' (アポストロフィ、一重引用符) |
数値型から文字型に変換したい場合は String 関数を使います。
数字型から文字型に変換する
var num : Number = 123;
var str : String = String(num);
テキストフィールドのプロパティを設定する
サンプルをダウンロード
■テキストフィールドのプロパティを設定する
テキストフィールドクラスが持つ読み取り専用のプロパティの一覧です(一部省略)
| プロパティ名 | 型 | 説明 |
| caretIndex | int | カーソル位置のインデックス |
| bottomScrollV | int | 現在の表示範囲の最終行 (1 からのインデックス) |
| length | int | テキストの文字数 |
| maxScrollH | int | scrollH の最大値 |
| maxScrollV | int | scrollV の最大値 |
| numLines | int | 複数行テキストフィールド内のテキスト行の数 |
| selectionBeginIndex | int | 現在の選択範囲の最初の文字 0 からのインデックス値 |
| selectionEndIndex | int | 現在の選択範囲の最後の文字 0 からのインデックス値 |
| textHeight | Number | テキストの高さ |
| textWidth | Number | テキストの幅 |
テキストフィールドクラスが持つ書き込み可能なプロパティの一覧です(一部省略)
| プロパティ名 | 型 | 説明 |
| alwaysShowSelection | Boolean | フォーカスが無くなっても選択状態を維持するか? |
| antiAliasType | String | アンチエイリアスの種類 AntiAliasType.* (embedFonts = true かつ TextFormat.fontで指定したフォントが swf ファイルに埋め込まれている時のみ動作) |
| autoSize | String | サイズ整形の種類 TextFieldAutoSize.* (wordWrap = false 時に動作) |
| background | Boolean | 背景の塗りがあるか? |
| backgroundColor | uint | 背景の色 (0xFFFFFF) |
| border | Boolean | 境界線があるか? |
| borderColor | uint | 境界線の色 (0xFFFFFF) |
| condenseWhite | Boolean | HTML表示時にスペース、改行などを削除するか? |
| defaultTextFormat | TextFormat | デフォルトの書式(次の項目で解説) |
| displayAsPassword | Boolean | パスワード表示か? |
| embedFonts | Boolean | 埋め込みフォントを使うか? (TextFormat.fontで指定したフォントが swf ファイルに埋め込まれている時のみ動作) |
| gridFitType | String | グリッドフィッティングの種類 GridFitType.* (antiAliasType = AntiAliasType.ADVANCED かつ embedFonts = true かつ TextFormat.fontで指定したフォントが swf ファイルに埋め込まれている時のみ動作) |
| maxChars | int | 最大の文字数 |
| mouseWheelEnabled | Boolean | ホイール回転時にスクロールするか? |
| multiline | Boolean | 複数行か? |
| restrict | String | 表示 & 入力可能な文字を制限(下に記述方法) |
| scrollH | int | 水平スクロール位置(0 から) |
| scrollV | int | 垂直座標 (1 から) |
| selectable | Boolean | 選択可能か? |
| sharpness | Number | 文字エッジのシャープネス(-400 ~ 400) (antiAliasType = AntiAliasType.ADVANCED かつ embedFonts = true かつ TextFormat.fontで指定したフォントが swf ファイルに埋め込まれている時のみ動作) |
| styleSheet | StyleSheet | スタイルシートを関連付け |
| textColor | uint | テキストの色 (0xFFFFFF) |
| thickness | Number | 文字エッジの太さ(-200 ~ 200) (antiAliasType = AntiAliasType.ADVANCED かつ embedFonts = true かつ TextFormat.fontで指定したフォントが swf ファイルに埋め込まれている時のみ動作) |
| type | String | テキストフィールドのタイプ TextFieldType.* |
| useRichTextClipboard | Boolean | コピー & ペースト時に書式もコピーするか? |
| wordWrap | Boolean | 折り返すか? |
■restrict プロパティ
表示したい文字や入力の制限をしたい場合は、restrict プロパティに以下のパラメータを記述します。
restrict プロパティの入力例
// テキストフィールドオブジェクトを作成する
var text_field = new TextField();
// 文字制限の設定
text_field.restrict = "abc"; // a,b,c のみ
text_field.restrict = "a-z"; // 小文字英字
text_field.restrict = "a-z0-9"; // 小文字英字と数字
text_field.restrict = "^A"; // A以外すべて
text_field.restrict = "^A-Z"; // 大文字英字以外すべて
text_field.restrict = "\\-; // -
text_field.restrict = "\\^"; // ^
text_field.restrict = "\u3041-\u3093"; // UNICODEで0x3041から0x3093まで
■antiAliasType プロパティ
アンチエイリアスの種類を設定するには、antiAliasType プロパティを使用します。
embedFonts = true かつ、 TextFormat.font で指定したフォントが swf ファイルに埋め込まれている時のみ動作します。
embedFonts = true かつ、 TextFormat.font で指定したフォントが swf ファイルに埋め込まれている時のみ動作します。
| 定数 | 文字 | 説明 |
| AntiAliasType.ADVANCED | "advanced" | アンチエイリアスをかける |
| AntiAliasType.NORMAL | "normal" | アンチエイリアスをかけない (小さいサイズだと綺麗に表示される) |
■autoSize プロパティ
サイズ整形の種類を設定するには、autoSize プロパティを使用します。
wordWrap = false の時に動作します。
| 定数 | 文字 | 説明 |
| TextFieldAutoSize.NONE | "none" | なし |
| TextFieldAutoSize.LEFT | "left" | 左に揃えて整形 |
| TextFieldAutoSize.RIGHT | "right" | 右に揃えて整形 |
| TextFieldAutoSize.CENTER | "center" | 中央に揃えて整形 |
■gridFitType プロパティ
グリッドフィッティングの種類を設定するには、gridFitType プロパティを使用します。
antiAliasType = AntiAliasType.ADVANCED かつ、 embedFonts = true かつ、 TextFormat.font で指定したフォントが swf ファイルに埋め込まれている時のみ動作します。
antiAliasType = AntiAliasType.ADVANCED かつ、 embedFonts = true かつ、 TextFormat.font で指定したフォントが swf ファイルに埋め込まれている時のみ動作します。
| 定数 | 文字 | 説明 |
| GridFitType.NONE | "none" | なし |
| GridFitType.PIXEL | "pixel" | 太い水平線と垂直線がピクセルグリッドに合わされます |
| GridFitType.SUBPIXEL | "subpixel" | 太い水平線と垂直線が LCD モニタのサブピクセルグリッドに合わされます |
■type プロパティ
テキストフィールドの種類を設定するには、type プロパティを使用します。
| 定数 | 文字 | 説明 |
| TextFieldType.DYNAMIC | "dynamic" | 入力不可能 |
| TextFieldType.INPUT | "input" | 入力可能 |
使用例です。
テキストフィールドのプロパティを設定する
// テキストフィールドオブジェクトを作成する
var tf = new TextField();
// 表示リストに登録する
stage.addChild(tf);
// テキストフィールドの設定
tf.border = true;
tf.x = 50;
tf.y = 100;
tf.width = 200;
tf.height = 20;
tf.text = "表示テスト";
tf.alwaysShowSelection = true; // フォーカスが無くなっても選択状態を維持するか?
tf.antiAliasType = AntiAliasType.NORMAL; // アンチエイリアスの種類
tf.autoSize = TextFieldAutoSize.CENTER; // サイズ整形の種類
tf.background = true; // 背景の塗りがあるか?
tf.backgroundColor = 0xFFDDDD; // 背景の色
tf.border = true; // 境界線があるか?
tf.borderColor =0xAA0000; // 境界線の色
tf.condenseWhite = false; // HTML表示時にスペース改行などを削除するか?
tf.displayAsPassword = false; // パスワード表示か?
tf.embedFonts = false; // 埋め込みフォントを使うか?
tf.gridFitType = GridFitType.NONE; // グリッドフィッティングの種類
tf.maxChars = 10; // 最大の文字数
tf.mouseWheelEnabled = true; // ホイール回転時にスクロールするか?
tf.multiline = true; // 複数行か?
tf.selectable = true; // 選択可能か?
tf.sharpness = 0; // 文字エッジのシャープネス
tf.textColor = 0x0000AA; // テキストの色
tf.thickness = 1; // 文字エッジの太さ
tf.type = TextFieldType.INPUT; // テキストフィールドのタイプ
tf.useRichTextClipboard = true; // コピー & ペースト時に書式もコピーするか?
tf.wordWrap = false; // 折り返すか?
テキストフィールドに書式を設定する
サンプルをダウンロード
■書式用のパラメータを作成する
書式用パラメータを設定するには TextFormat クラスを使用します。
まず、TextFormat クラスをインスタンス化します。
TextFormat インスタンスを作成する
// TextFormat オブジェクトを作成する
var format = new TextFormat();
テキストフォーマットクラスが持つプロパティの一覧です(一部省略)
| プロパティ名 | 型 | 説明 |
| align | String | 整列の設定 TextFormatAlign.* |
| font | String | フォント名を文字列で指定 例)"MS ゴシック" |
| size | Object | 文字のポイントサイズ |
| color | Object | 文字の色 (0xFFFFFF) |
| bold | Object | 太字にするか? |
| italic | Object | 斜体にするか? |
| underline | Object | アンダーラインを表示するか? |
| bullet | Object | 箇条書きにするか? |
| kerning | Object | カーニングが有効か?(埋め込みフォント時のみ動作) |
| blockIndent | Object | 全体のインデント(単位:ピクセル) |
| indent | Object | 折り返し行以外のインデント |
| leading | Object | 行間の垂直の行送り |
| leftMargin | Object | 段落の左マージン(単位:ピクセル) |
| rightMargin | Object | 段落の右マージン(単位:ピクセル) |
| letterSpacing | Object | すべての文字間に均等に配分されるスペースの量(単位:ピクセル) |
| tabStops | Array | タブストップを配列の 0 番目に入れて指定 例) [40] (単位:ピクセル) |
| url | String | ハイパーリンク先を文字列で指定 |
| target | String | ハイパーリンク先のターゲットウィンドウ 例)"_blank" |
整列の種類を設定するには align プロパティを使用します。
| 定数 | 文字 | 説明 |
| TextFormatAlign.LEFT | "left" | 左に整列 |
| TextFormatAlign.RIGHT | "right" | 右に整列 |
| TextFormatAlign.CENTER | "center" | 中央に配置 |
| TextFormatAlign.JUSTIFY | "justify" | 均等割り付け |
設定例です。
TextFormat にパラメータを設定する
// TextFormat オブジェクトを作成する
var format = new TextFormat();
format.align = TextFormatAlign.RIGHT; // 整列
format.font = "MS ゴシック"; // フォント名
format.size = 14; // 文字のポイントサイズ
format.color = 0xFF0000; // 文字の色
format.bold = true; // 太字にするか?
format.italic = true; // 斜体にするか?
format.underline = true; // アンダーラインを表示するか?
format.bullet = true; // 箇条書きにするか?
format.kerning = true; // カーニングが有効か?(埋め込みフォント時のみ動作)
format.blockIndent = 0; // 全体のインデント(単位:ピクセル)
format.indent = 0; // 折り返し行以外のインデント
format.leading = -2; // 行間の垂直の行送り
format.leftMargin = 5; // 段落の左マージン(単位:ピクセル)
format.rightMargin = 5; // 段落の右マージン(単位:ピクセル)
format.letterSpacing = 4; // 文字間スペースの量(単位:ピクセル)
format.tabStops = [120]; // タブストップ
format.url = null; // ハイパーリンク先を文字列で指定
format.target = null; // ハイパーリンク先のターゲットウィンドウ
■デフォルトの書式を設定する
テキストフィールドのデフォルトの書式を設定するには、defaultTextFormat プロパティを使用します。
TextFormat オブジェクトを代入して書式を設定した後に、テキストを更新すると書式が適用されます。
すでに表示されているテキストは変更されません。
デフォルトの書式を設定する
// TextFormat オブジェクトを作成する
var format = new TextFormat();
// 書式を設定する
format.size = 14; // 文字のポイントサイズ
format.color = 0xFF0000; // 文字の色
// テキストフィールドオブジェクトを作成する
var text_field = new TextField();
// 表示リストに登録する
stage.addChild(text_field);
// デフォルトの書式を設定する
text_field.defaultTextFormat = format;
// 表示したいテキストを設定する
text_field.text = "表示テスト";
■すでに表示されているテキストに書式を設定する
テキストフィールドにすでに表示されているテキストに書式を設定するには、setTextFormat() メソッドを使用します。
このメソッドで設定した書式は一時的なものであり、テキストを更新すると書式がデフォルトに戻ります。
テキストフィールド.setTextFormat ( TextFormat , 開始番号 , 終了番号 );
| 第01引数 | テキストフォーマットのインスタンス |
| 第02引数(略可) | 書式の適用を開始するインデックス番号(-1 ではじめから) |
| 第03引数(略可) | 書式の適用を終了するインデックス番号(-1 で最後まで) |
| 戻り値 | なし |
使用例です。
表示されているテキストの 2 番目から 4 番目までに書式を設定する
// TextFormat オブジェクトを作成する
var format = new TextFormat();
// 書式を設定する
format.size = 14; // 文字のポイントサイズ
format.color = 0xFF0000; // 文字の色
// テキストフィールドオブジェクトを作成する
var text_field = new TextField();
// 表示リストに登録する
stage.addChild(text_field);
// 表示したいテキストを設定する
text_field.text = "表示テスト";
// 現在表示されている 2 番目から 4番目の文字に書式を設定する
text_field.setTextFormat(format,1,4);

