HAKUHIN's home page
更新履歴
 
 

 

テキストフィールドとは?
 

■ 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> 下線タグ
 
エンティティ説明
&lt; < (より小さい)
&gt; > (より大きい)
&amp; & (アンパサンド)
&quot; " (二重引用符)
&apos; ' (アポストロフィ、一重引用符)
 
数値型から文字型に変換したい場合は String 関数を使います。
 
数字型から文字型に変換する

var num : Number = 123;
var str : String = String(num);
 
 

 

テキストフィールドのプロパティを設定する
 

サンプルをダウンロード
 


■テキストフィールドのプロパティを設定する

テキストフィールドクラスが持つ読み取り専用のプロパティの一覧です(一部省略)
 
プロパティ名説明
caretIndexintカーソル位置のインデックス
bottomScrollVint現在の表示範囲の最終行 (1 からのインデックス)
lengthintテキストの文字数
maxScrollHintscrollH の最大値
maxScrollVintscrollV の最大値
numLinesint 複数行テキストフィールド内のテキスト行の数
selectionBeginIndexint現在の選択範囲の最初の文字 0 からのインデックス値
selectionEndIndexint現在の選択範囲の最後の文字 0 からのインデックス値
textHeightNumberテキストの高さ
textWidthNumberテキストの幅
 
テキストフィールドクラスが持つ書き込み可能なプロパティの一覧です(一部省略)
 
プロパティ名説明
alwaysShowSelectionBooleanフォーカスが無くなっても選択状態を維持するか?
antiAliasTypeStringアンチエイリアスの種類 AntiAliasType.*
(embedFonts = true かつ
TextFormat.fontで指定したフォントが
swf ファイルに埋め込まれている時のみ動作)
autoSizeStringサイズ整形の種類 TextFieldAutoSize.*
(wordWrap = false 時に動作)
backgroundBoolean背景の塗りがあるか?
backgroundColoruint背景の色 (0xFFFFFF)
borderBoolean境界線があるか?
borderColoruint境界線の色 (0xFFFFFF)
condenseWhiteBooleanHTML表示時にスペース、改行などを削除するか?
defaultTextFormatTextFormatデフォルトの書式(次の項目で解説)
displayAsPasswordBooleanパスワード表示か?
embedFontsBoolean埋め込みフォントを使うか?
(TextFormat.fontで指定したフォントが
swf ファイルに埋め込まれている時のみ動作)
gridFitTypeStringグリッドフィッティングの種類 GridFitType.*
(antiAliasType = AntiAliasType.ADVANCED かつ
embedFonts = true かつ
TextFormat.fontで指定したフォントが
swf ファイルに埋め込まれている時のみ動作)
maxCharsint最大の文字数
mouseWheelEnabledBooleanホイール回転時にスクロールするか?
multilineBoolean複数行か?
restrictString表示 & 入力可能な文字を制限(下に記述方法)
scrollHint水平スクロール位置(0 から)
scrollVint垂直座標 (1 から)
selectableBoolean選択可能か?
sharpnessNumber文字エッジのシャープネス(-400 ~ 400)
(antiAliasType = AntiAliasType.ADVANCED かつ
embedFonts = true かつ
TextFormat.fontで指定したフォントが
swf ファイルに埋め込まれている時のみ動作)
styleSheetStyleSheetスタイルシートを関連付け
textColoruintテキストの色 (0xFFFFFF)
thicknessNumber文字エッジの太さ(-200 ~ 200)
(antiAliasType = AntiAliasType.ADVANCED かつ
embedFonts = true かつ
TextFormat.fontで指定したフォントが
swf ファイルに埋め込まれている時のみ動作)
typeStringテキストフィールドのタイプ TextFieldType.*
useRichTextClipboardBooleanコピー & ペースト時に書式もコピーするか?
wordWrapBoolean折り返すか?
 
■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 ファイルに埋め込まれている時のみ動作します。
 
定数文字説明
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 ファイルに埋め込まれている時のみ動作します。
 
定数文字説明
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();
 
テキストフォーマットクラスが持つプロパティの一覧です(一部省略)
 
プロパティ名説明
alignString整列の設定 TextFormatAlign.*
fontStringフォント名を文字列で指定 例)"MS ゴシック"
sizeObject文字のポイントサイズ
colorObject文字の色 (0xFFFFFF)
boldObject太字にするか?
italicObject斜体にするか?
underlineObjectアンダーラインを表示するか?
bulletObject箇条書きにするか?
kerningObjectカーニングが有効か?(埋め込みフォント時のみ動作)
blockIndentObject全体のインデント(単位:ピクセル)
indentObject折り返し行以外のインデント
leadingObject行間の垂直の行送り
leftMarginObject段落の左マージン(単位:ピクセル)
rightMarginObject段落の右マージン(単位:ピクセル)
letterSpacingObjectすべての文字間に均等に配分されるスペースの量(単位:ピクセル)
tabStopsArrayタブストップを配列の 0 番目に入れて指定
例) [40] (単位:ピクセル)
urlStringハイパーリンク先を文字列で指定
targetStringハイパーリンク先のターゲットウィンドウ 例)"_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);
 
 



HAKUHIN's home page バナー http://hakuhin.jp/
(c) Hakuhin & 日新礼符 2002-2011 解像度1024×768以上 IE8.0以上推奨
/ 閲覧中: