TextInput コンポーネントの使用

TextInput コンポーネントのユーザー操作
TextInput コンポーネントのパラメーター
TextInput コンポーネントを使用したアプリケーションの作成
- ActionScript を使用した TextInput インスタンスの作成

TextInput コンポーネントは、ネイティブの ActionScript TextField オブジェクトのラッパーである単一行テキストコンポーネントです。複数行のテキストフィールドが必要な場合は、TextArea コンポーネントを使用します。例えば、TextInput コンポーネントをフォームのパスワードフィールドに使用することが考えられます。また、ユーザーが Tab キーでフィールドの外に移動したときに、フィールドに十分な文字が入力されているかどうかをチェックするリスナをセットアップすることができます。このリスナを使うと、適切な文字数を入力する必要があることをユーザーに知らせるエラーメッセージを表示できます。

setStyle() メソッドを使用して textFormat プロパティを設定すると、TextInput インスタンスに表示するテキストのスタイルを変更できます。TextInput コンポーネントは、HTML 形式でフォーマットすることも、テキストを隠すパスワードフィールドとしてフォーマットすることもできます。

TextInput コンポーネントのユーザー操作

アプリケーション内で TextInput コンポーネントを有効または無効にすることができます。無効状態のときは、マウスおよびキーボードからの入力を受け付けません。有効状態のときは、ActionScript TextField オブジェクトと同じフォーカス、選択、およびナビゲーションの規則に従います。フォーカスを取得している TextInput インスタンスでは、次のキーを使用した操作も可能です。

キー	説明
矢印キー	挿入ポインターを 1 文字左または右に移動します。
Shift+Tab	フォーカスを前のオブジェクトに移動します。
Tab	フォーカスを次のオブジェクトに移動します。

フォーカスの制御について詳しくは、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の FocusManager クラスおよび FocusManager の操作を参照してください。

各 TextInput インスタンスのライブプレビューには、オーサリング時にプロパティインスペクターまたはコンポーネントインスペクターでパラメーターに加えた変更が反映されます。ライブプレビューではテキストを選択できず、ステージ上のコンポーネントインスタンスにテキストを入力することはできません。

TextInput コンポーネントをアプリケーションに追加する際にアクセシビリティパネルを使用することで、そのコンポーネントをスクリーンリーダーが読み取れるように設定できます。

TextInput コンポーネントのパラメーター

プロパティインスペクターまたはコンポーネントインスペクターで、TextInput コンポーネントの各インスタンスに設定できるオーサリングパラメーターは、 editable 、 displayAsPassword 、 maxChars 、 restrict および text です。これらの各パラメーターには、対応する同名の ActionScript プロパティがあります。これらのパラメーターに設定できる値については、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の TextInput クラスを参照してください。

ActionScript を記述すれば、TextInput コンポーネントのプロパティ、メソッド、イベントを使用して、これらのオプションやその他のオプションを制御できます。詳しくは、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の TextInput クラスを参照してください。

TextInput コンポーネントを使用したアプリケーションの作成

次の手順は、TextInput コンポーネントをアプリケーションに追加する方法を示しています。この例では、2 つの TextInput フィールドを使用して、パスワードを入力および確認します。イベントリスナを使用して、最小文字数である 8 文字が入力されたことと、2 つのフィールドのテキストが一致していることを確認します。

新しい Flash (ActionScript 3.0) ドキュメントを作成します。
Label コンポーネントをコンポーネントパネルからステージにドラッグし、プロパティインスペクターで次の値を設定します。
- インスタンス名として pwdLabel と入力します。
- W 値として 100 と入力します。
- X 値として 50 と入力します。
- Y 値として 150 と入力します。
- 「パラメーター」セクションで、text パラメーターの値として パスワード と入力します。
2 番目の Label コンポーネントをコンポーネントパネルからステージにドラッグし、次の値を設定します。
- インスタンス名として confirmLabel と入力します。
- W 値として 100 と入力します。
- X 値として 50 と入力します。
- Y 値として 200 と入力します。
- 「パラメーター」セクションで、text パラメーターの値として パスワードの確認 と入力します。
TextInput コンポーネントをコンポーネントパネルからステージにドラッグし、次の値を設定します。
- インスタンス名として pwdTi と入力します。
- W 値として 150 と入力します。
- X 値として 190 と入力します。
- Y 値として 150 と入力します。
- 「パラメーター」セクションで、 displayAsPassword パラメーターの値をダブルクリックし、 true を選択します。これにより、テキストフィールドに入力された値がアスタリスクでマスクされるようになります。
2 番目の TextInput コンポーネントをコンポーネントパネルからステージにドラッグし、次の値を設定します。
- インスタンス名として confirmTi と入力します。
- W 値として 150 と入力します。
- X 値として 190 と入力します。
- Y 値として 200 と入力します。
- 「パラメーター」セクションで、 displayA s Password パラメーターの値をダブルクリックし、 true を選択します。これにより、テキストフィールドに入力された値がアスタリスクでマスクされるようになります。
アクションパネルを開いて、メインタイムライン内でフレーム 1 を選択し、次の ActionScript コードを入力します。
```
function tiListener(evt_obj:Event){ 
if(confirmTi.text != pwdTi.text || confirmTi.length < 8) 
{ 
        trace("Password is incorrect. Please reenter it."); 
}  
else { 
        trace("Your password is: " + confirmTi.text); 
} 
} 
confirmTi.addEventListener("enter", tiListener);
```
このコードでは、 confirmTi という TextInput インスタンスの enter イベントハンドラーをセットアップします。2 つのパスワードが一致しない場合や、ユーザーの入力した文字が 8 文字未満の場合は、「パスワードが正しくありません。再入力してください。」というメッセージが表示されます。パスワードが 8 文字以上で 2 つが一致している場合は、入力された値を出力パネルに表示します。
制御／ムービープレビューを選択します。

ActionScript を使用した TextInput インスタンスの作成

次の例では、ActionScript を使用して TextInput コンポーネントを作成します。さらに、ユーザーに名前の入力を要求するために使用する Label も作成します。この例では、大文字と小文字、ピリオドおよびスペースのみを使用できるようにコンポーネントの restrict プロパティを設定します。また、Label コンポーネントと TextInput コンポーネントの両方のテキストをフォーマットするために使用する TextFormat オブジェクトも作成します。

新しい Flash (ActionScript 3.0) ドキュメントを作成します。
TextInput コンポーネントをコンポーネントパネルからライブラリパネルにドラッグします。
Label コンポーネントをコンポーネントパネルからライブラリパネルにドラッグします。

アクションパネルを開いて、メインタイムライン内でフレーム 1 を選択し、次の ActionScript コードを入力します。

import fl.controls.Label; 
import fl.controls.TextInput; 
 
var nameLabel:Label = new Label(); 
var nameTi:TextInput = new TextInput(); 
var tf:TextFormat = new TextFormat(); 
 
addChild(nameLabel); 
addChild(nameTi); 
 
nameTi.restrict = "A-Z .a-z"; 
 
tf.font = "Georgia"; 
tf.color = 0x0000CC; 
tf.size = 16; 
 
nameLabel.text = "Name: " ; 
nameLabel.setSize(50, 25); 
nameLabel.move(100,100); 
nameLabel.setStyle("textFormat", tf); 
nameTi.move(160, 100); 
nameTi.setSize(200, 25); 
nameTi.setStyle("textFormat", tf);

制御／ムービープレビューを選択して、アプリケーションを実行します。