テキストフォームのテキストをクリックで消す方法

質問

メールアドレスを入力させるテキストフォームに「メールアドレスを入力してください」と表示させておき、クリックするとそのテキストが消え入力できる状態にする方法を探しています。

javascriptでの方法はあったのですが、Flashでのactionscriptではどのように記述したらよいのでしょうか？

よろしくお願いいたします。

回答No.1

DPE · ベストアンサー

Flash では、選択することができる対象（ボタンやボタン機能を使用しているムービークリップ、文字を選択できるテキストフィールドなど）をクリックした時、その対象には”フォーカス”と呼ばれるものが当たります。
テキストフィールドでは、種類を”テキスト入力”にするか、もしくは”静止テキスト”または”ダイナミックテキスト”で文字を選択可能に設定すると、フォーカスが当たる対象に含まれます。

選択・操作する対象として同時に選ばれるものはムービーの中に１つしかないため、フォーカスが当たっている対象も常に１つしかありません。
つまり、選択できる対象が複数ある場合、他の対象が選択された時には、前にフォーカスが当たっていたものはフォーカスを失うことになります。

テキストフィールドを制御する TextField クラス（ Flash MX ではオブジェクト）には、フォーカスが当たった時に指定の関数を自動的に呼び出してくれる” onSetFocus ”と、他の対象にフォーカスが移ったために自分がフォーカスを失う時に関数を呼び出す” onKillFocus ”というイベントハンドラがあります。
この２つを利用してはいかがでしょう。

-----------------------------------------------------------

作り方の一例です。

ステージにテキストフィールドを作り、種類を”テキスト入力”に設定してください。
それから、種類を選ぶリスト（「プロパティ」パネルの左上）のすぐ下にインスタンス名を入力する項目がありますので、何か名前を入力してください。
ここでは仮に” mail_input ”と付けたとします。

以上で準備は完了です。
次はスクリプトを書きます。

********************************

Flash Player 6 以降、ActionScript 1.0 のスクリプトの例です。
Flash CS3 をお使いの場合は、ActionScript のバージョンを 1.0 か 2.0 に設定してください。
このスクリプトは、テキストフィールドがあるタイムラインのフレームに記述してください。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください。このまま使うとシンタックスエラーになります）

/************************************************************/

　//テキストフィールドのセットアップ
　//テキスト入力・単一行・自動伸縮なし・境界枠あり・HTMLを無効
　mail_input.type = "input";
　mail_input.multiline = false;
　mail_input.autoSize = "none";
　mail_input.border = true;
　mail_input.html = false;

　//デフォルトの文字列を入れておく
　sample_str = "メールアドレスを入力してください";
　mail_input.text = sample_str;

　//テキストフィールドにフォーカスが当たった時の処理
　mail_input.onSetFocus = function()
　{
　　//入力されている文字列がデフォルトの場合は、文字列を削除する
　　if( mail_input.text == sample_str )
　　{
　　　mail_input.text = "";
　　}
　};

　//テキストフィールドからフォーカスが外れた時の処理
　mail_input.onKillFocus = function()
　{
　　//何も入力されていなければ、デフォルトの文字列を表示する
　　//何か入力されている時は何もしない
　　if( mail_input.text == "" )
　　{
　　　mail_input.text = sample_str;
　　}
　};

/************************************************************/

”テキストフィールドのセットアップ”の部分は、「プロパティ」パネルで設定している場合は不要です。
テキストフィールドが１つだけで他にボタンなどもないと、このテキストフィールドは常にフォーカスを失うことがないので onKillFocus は意味がありません。”テキスト入力”のテキストフィールドやボタン等を追加して、動作を確認してみてください。

インスタンス名” mail_input ”のテキストフィールドに、最初は「メールアドレスを入力してください」と表示されます。
クリックするとこの文字が消え、何かを入力できるようになります。
他のテキストフィールドなどをクリックするか Tab キーで選択すると、mail_input はフォーカスを失います。
この時、何も入力されていない状態だった場合に限り、デフォルトの「メールアドレスを・・・」の文字列を表示します。

********************************

TextField クラスには、テキストフィールド内に表示する内容を管理している” text ”というプロパティがあり、書き換えるとテキストフィールドの内容をスクリプトで変更することができます。
text プロパティと onSetFocus を合わせて、”フォーカスを得た時に text プロパティに空っぽの文字列（ "" ）を入れて内容をクリアする”ことが、今回の基本的な考え方です。

しかし、フォーカスを得た時に無条件で text プロパティをクリアすると、メールアドレスが入力されていてもクリアされることになり、せっかく入力した情報が消えてしまいます。
そこで、クリアする時に条件を付けて、フォーカスを得た時にデフォルトの「メールアドレスを・・・」の文字列が表示されている場合だけクリアして入力できるようにします。
何かが入力されている場合は、次にフォーカスを得て onSetFocus によりこの関数が呼び出されても、if 文の条件が不成立になるので内容がクリアされません。

フォーカスに関しては、フォーカスを失った時にも何かを実行することができます。
テキストフィールドでは、” onKillFocus ”というイベントハンドラで定義します。

メールアドレスを入力しようとしてその項目をクリックしても、何も入力しないまま他の項目を選んだり、手違いで入力できていないのに気付かず先に進んでしまった・・・など、「入力したつもりだったけれど、実は入力されなかった」という状況はいろいろと想定できると思います。
onKillFocus イベントハンドラを利用すると、このような場合にデフォルトの文字列に戻すことができます。
テキストフィールドを空っぽにしたままで構わないのでしたら、mail_input.onKillFocus = function ・・・の部分を削除してください。

-----------------------------------------------------------

今回は触れませんが。
テキストフィールドに入力できる文字の種類を制限する” restrict ”プロパティで半角文字だけを受け付けるようにしたり、Flash 8 以降であれば IME クラス（ System.IME クラス）と onSetFocus を合わせて、フォーカスを得た時に自動的に半角英数モードに切り替えるといったことも可能です。
ユーザーは何を入力するか分からないので、入力されると困るものは予め可能な限り排除しておき、最後に入力されたものにチェックを入れて問題があれば入力し直してもらう設計にすると万全です。

IME クラスの使用例は Flash のテクニカルノートで紹介されています。
よろしければ、ご参考になさってください。

　・ Adobe サポートデータベース [228676]
　　IME クラスを使用して OS の IME を制御する
　　http://support.adobe.co.jp/faq/faq/qadoc.sv?228676+002

お礼

DPEさま
大変丁寧で細かな説明をしていただきありがとうございます！
無事に作成することができました。

とても勉強になりました。
ありがとうございました！！