説明
cfform タグ内に複数行のテキスト入力ボックスを配置し、表示仕様を制御します。さらにオプションで、HTML テキストの書式を制御するための設定可能なコントロールを含むリッチテキストエディタを表示します。
カテゴリ
シンタックス
<cftextarea name="name" basepath="path" bind="bind expression" bindAttribute="attribute name" bindOnLoad="false|true" disabled="true|false" or no attribute value enabled="yes|no" fontFormats="comma separated list" fontNames="comma separated list" fontSizes="comma separated list" height="number of pixels" html="no|yes" label="text" maxlength="number" message="text" onBindError = "JavaScript function name" onChange="JavaScript or ActionScript" onClick="JavaScript or ActionScript" onError="script name" onKeyDown="JavaScript or ActionScript" onKeyUp="JavaScript or ActionScript" onMouseDown="JavaScript or ActionScript" onMouseUp="JavaScript or ActionScript" onValidate="script name" pattern="regexp" range="minimum value, maximum value" required="yes|no" richtext="no|yes" secureUpload="true|false" skin="default|silver|office2003|custom skin" sourceForToolTip="URL" style="style specification" stylesXML="path" templatesXML"path" toolbar="Default|Basic|custom toolbar" toolbarOnFocus"no|yes" tooltip="tip text" validate="data type" validateAt= one or more of "onBlur, onServer, onSubmit" value="text" visible="yes|no" width="number of pixels" wrap="off|hard|soft|virtual|physical"> text </cftextarea>
一部の属性は、特定の表示形式のみに適用されます。詳細については、「属性」の表を参照してください。
このタグの属性は attributeCollection 属性で指定でき、その値は構造体になります。attributeCollection 属性で構造体の名前を指定し、タグの属性名を構造体のキーとして使用します。
関連項目
cfajaximport、cfapplet、cfcalendar、cfform、cfformgroup、cfformitem、cfgrid、cfinput、cfselect、cfslider、cftree、『ColdFusion アプリケーションの開発』の「データの取得および形式設定の概要」および「Ajax フォームのコントロールおよび機能の使用」
履歴
ColdFusion 8:
- HTML 形式フォームで bind 属性を使用できるようになりました（bindAttribute、bindOnLoad、onBindError 属性を含む）。
- HTML 形式でツールヒントを使用できるようになりました（sourceForTooltip 属性など）。
- HTML 形式でリッチテキストエディターを使用できるようになりました（richtext、basepath、fontFormats、fontNames、fontSizes、skin、stylesXML、templatesXML、toolbar、toolbarOnFocus 属性など）。height および width 属性のサポートが追加されました。ColdFusion MX 7：このタグが追加されました。
属性
次の表は、ColdFusion が直接使用する属性のリストです。HTML 形式では、このリストに記載されていない HTML textarea タグ属性もすべてサポートされ、ブラウザーに直接渡されます。
「すべて」または「XML」と記載されてない属性は、ColdFusion に同梱されているスキンでは処理されません。ただし、これらの属性は生成された XML に含まれます。
属性 |
必須／オプション、形式 |
デフォルト |
説明 |
|---|---|---|---|
name |
必須、すべて |
|
cftextinput コントロールの 名前。 |
basepath |
オプション、HTML |
cf_scripts/scripts/ajax /CKEditor |
リッチテキストエディターが存在するディレクトリのパスです。エディターの設定ファイルは、このディレクトリのトップレベルにあります。richText 属性が true の場合にのみ意味があります。 |
bind |
オプション、Flash、HTML |
|
コントロールの属性をダイナミックに設定するバインド式です。詳細については、「使用方法」を参照してください。 |
bindAttribute |
オプション、HTML |
値 |
bind 属性を使用して値を設定する HTML タグ属性を指定します。ColdFusion 固有の属性ではなく、ブラウザーの HTML DOM ツリーに含まれる属性のみを指定できます。bind 属性がない場合は無視されます。 |
bindOnLoad |
オプション、HTML |
no |
フォームを最初にロードするときに bind 属性の式を実行するかどうかを指定するブール値です。bind 属性がない場合は無視されます。 |
disabled |
オプション、すべて |
no |
ユーザー入力を無効にし、コントロールを読み取り専用にします。入力を無効にするには、属性を省略して disabled を指定するか、disabled="yes"（または ColdFusion で使用する true などの真を表すブール値）を指定します。入力を有効にするには、属性を省略するか、disabled="no"（または ColdFusion で使用する false などの偽を表すブール値）を指定します。 |
enabled |
オプション、Flash |
yes |
コントロールを有効にするかどうかを指定するブール値です。無効なコントロールはライトグレーで表示されます。disabled 属性の逆です。 |
fontFormats |
オプション、HTML |
すべての有効な形式 |
リッチテキストエディタの [形式] セレクタに表示されるフォント名のカンマ区切りリストです。形式を選択すると、入力または選択されたテキストに適用する HTML タグが決定されます。p、div、pre、address、h1、h2、h3、h4、h5、h6 の中から任意のタグを指定できます。 |
fontNames |
オプション、HTML |
すべての有効なフォント名 |
リッチテキストエディタの [フォント] セレクタに表示されるフォント名のカンマ区切りリストです。Arial、Comic Sans MS、Courier New、Tahoma、Times New Roman、Verdana の中から任意のフォントを指定できます。 |
FontSizes |
オプション、HTML |
「説明」を参照 |
リッチテキストエディタの [サイズ] セレクタに表示されるフォントサイズのカンマ区切りリストです。このリストのエントリは、「フォントサイズの値/説明テキスト」という形式で指定する必要があります。たとえば、フォントサイズ 1 を示すために "small font" というテキストを表示するには、"1/small font" と指定します。デフォルトでは、1/xx-small、2/x-small、3/small、4/medium、5/large、6/x-large、および 7/xx-large という値がセレクタに表示されます。 |
height |
オプション、Flash、HTML |
|
Flash フォームの場合は、 コントロールの高さを ピクセル単位で指定します。 |
html |
オプション、Flash |
no |
テキスト領域に HTML が含まれるかどうかを指定するブール値です。 |
label |
オプション、Flash および XML |
|
フォーム内のコントロールの横に配置するラベルです。 |
maxLength |
オプション、すべて |
|
入力可能なテキストの最大長です。この属性は、 validate 属性で maxlength が指定されている場合にのみ効果を持ちます。 |
message |
オプション、すべて |
|
検証に失敗した場合に表示されるメッセージテキストです。 |
onBindError |
オプション、HTML |
「説明」を参照 |
バインド式の評価でエラーが発生した場合に実行する JavaScript 関数の名前です。この関数は 2 つの属性 (HTTP ステータスコードとメッセージ) を取る必要があります。発生したエラーが HTTP エラーでない場合、ステータスコードは -1 です。この属性を 省略し、 （ColdFusion.setGlobalErrorHandler 関数を使用して）グローバルエラーハンドラを指定すると、エラーメッセージが表示されます。それ以外の場合は、デフォルトのエラーポップアップが表示されます。 |
onChange |
オプション、すべて |
|
ユーザーのアクションに応じてコントロールに変化があったときに実行される JavaScript（HTML／XML の場合）または ActionScript（Flash の場合）です。 |
onClick |
オプション、HTML および XML |
|
ユーザーがコントロールをクリックしたときに実行される JavaScript です。 |
onError |
オプション、HTML および XML |
|
検証に失敗した場合に実行するカスタム JavaScript 関数です。 |
onKeyDown |
オプション、すべて |
|
ユーザーがコントロールでキーボードのキーを押したときに実行される JavaScript（HTML／XML の場合）または ActionScript（Flash の場合）です。 |
onKeyUp |
オプション、すべて |
|
ユーザーがコントロール内でキーボードのキーを放したときに実行される JavaScript（HTML／XML の場合）または ActionScript（Flash の場合）です。 |
onMouseDown |
オプション、すべて |
|
ユーザーがコントロール内でマウスボタンを放したときに実行される JavaScript（HTML／XML の場合）または ActionScript（Flash の場合）です。 |
onMouseUp |
オプション、すべて |
|
ユーザーがコントロール内でマウスボタンを押したときに実行される JavaScript（HTML／XML の場合）または ActionScript（Flash の場合）です。 |
onValidate |
オプション、HTML および XML |
|
ユーザー入力を検証するためのカスタム JavaScript です。JavaScript DOM フォームオブジェクト、入力オブジェクトおよび入力オブジェクト値が関数に渡されます。検証に成功すると true が返されます。検証に失敗すると false が返されます。この属性を指定した場合、ColdFusion は validate 属性を無視します。 |
pattern |
|
|
入力を検証するための、JavaScript 正規表現のパターンです。先頭および末尾のスラッシュ記号は削除されます。この属性は、validate 属性で regex が指定されている場合にのみ効果を持ちます。例およびシンタックスについては、「cfform タグによるダイナミックフォーム の 作成」（『ColdFusion アプリケーションの開発』）を参照してください。 |
range |
オプション、すべて |
|
指定可能な数値の最大値と最小値です。この属性は、validate 属性に range が指定されている場合にのみ使用されます。単一の値を指定するか、単一の値の後にカンマを付けて指定した場合、その値は最小値として処理されます。最大値はありません。カンマの後に単一の値を指定した場合、その値は最大値として設定されます。最小値はありません。 |
required |
オプション、すべて |
no |
|
richText |
オプション、HTML |
no |
このコントロールが、テキストの書式を制御するツールバーの付いたリッチテキストエディターで あるかどうかを指定する ブール値です。リッチテキストエディターの使用について詳しくは、『ColdFusion アプリケーションの開発』の「Ajax フォームのコントロールおよび機能の使用」の「リッチテキストエディターの使用」を参照してください。 |
skin |
オプション、HTML |
default |
リッチテキストエディターで使用するスキンを指定します。デフォルトで有効な値は、default、silver および office2003 です。カスタムスキンを作成して、そのスキンをこの属性で指定することもできます。詳しくは、『ColdFusion アプリケーションの開発』の「Ajax フォームのコントロールおよび機能の使用」の「リッチテキストエディターの使用」を参照してください。 |
sourceForTooltip |
オプション、HTML |
|
ツールヒントとして表示するページの URL です 。このページには内容と書式を制御するための CFML および HTML を含めることができ、ヒントにはイメージを含めることができます。 |
style |
オプション、すべて |
|
HTML または XML 形式フォームの場合、style 属性はブラウザーまたは XML に渡されます。 |
stylesXML |
オプション、HTML |
/ ckstyles .xml |
リッチテキストエディターの「スタイル」セレクタに表示されるスタイルを定義したファイルのパスです。ckeditor.html ファイルが存在するディレクトリ（通常は <ColdFusion の Web ルート>/cf_scripts/ajax/CKeditor/editor）からの相対パスです。/myApps/RTEeditor.mystyles.xml のように Web ルートから始まる絶対パスを指定できます。スタイルの設定について詳しくは、『ColdFusion アプリケーションの開発』の「Ajax フォームのコントロールおよび機能の使用」の「リッチテキストエディターの使用」を参照してください。 |
templatesXML |
オプション、HTML |
/ cktemplates .xml |
リッチテキストエディターの「テンプレート」アイコンをクリックしたときに表示されるテンプレートを定義するファイルのパスです。パスについて詳しくは、stylesXML を参照してください。テンプレートの設定については、『ColdFusion アプリケーションの開発』の「リッチテキストエディターの使用」を参照してください。 |
toolbar |
オプション、HTML |
Default |
リッチテキストエディターのツールバーを指定します。デフォルトで、この属性の有効な値は 次のとおりです。 Default（すべてのコントロールのセット）および Basic（最低限の設定）。設定を追加できます。詳しくは、『ColdFusion アプリケーションの開発』の「Ajax フォームのコントロールおよび機能の使用」の「リッチテキストエディターの使用」を参照してください。 |
toolbarOnFocus |
オプション、HTML |
no |
リッチテキストエディターがフォーカスを持っているときにのみリッチテキストエディターツールバーのコントロールを展開して表示するかどうかを指定するブール値です。 |
tooltip |
オプション、Flash、HTML |
|
マウスポインタをコントロールの上に置いたときに表示されるテキストです。HTML 書式設定も使用できます。 |
validate |
オプション、すべて |
|
実行する検証のタイプです。使用可能な検証のタイプとアルゴリズムは、形式によって異なります。詳しくは、 cfinput タグリファレンスの「使用方法」の節を参照してください。 |
validateAt |
オプション、HTML および XML |
onSubmit |
検証の実行方法です。次の中から 1 つ以上を指定します。
|
値 |
オプション、すべて |
|
テキストコントロールに表示する 初期値 です。初期値は属性またはタグ本文を使って指定できますが、これら両方の場所で指定することはできません。属性として値を指定する場合は、 cftextarea 開始タグの直後に（間にスペースや改行をはさまずに） cftextarea 終了タグを置くか、 cftextarea 開始タグの末尾に終了のスラッシュを置きます。例：<cftextarea name="description" value="Enter a description."/> |
visible |
オプション、Flash |
yes |
コントロールを表示するかどうかを指定するブール値です。表示されないコントロールが使用するスペースは空白です。 |
width |
オプション、Flash、HTML |
|
コントロールの幅をピクセル単位で指定します。 |
wrap |
OptionalAll |
|
|
使用方法
HTML 形式でこのタグを正しく動作させるには、JavaScript 対応のブラウザを使用する必要があります。
テキストをタグ本文に配置すると、コントロールでは cftextarea の開始タグと終了タグの間にあるすべてのテキスト文字が表示されます。したがって、改行や空白を使ってソーステキストの形式を設定した場合、それらはコントロールに表示されます。cfform の preserveData 属性が「yes」で、フォームが同じページに送信される場合は、value 属性の値ではなく cftextinput コントロールの送信された値が使用されます。
Validation
Flash フォームデータのバインディング
bind 属性を使用すると、フォームフィールドに他のフォームフィールドの内容を挿入できます。cftextarea の bind 属性で他の Flash フォームフィールドのテキストを指定するには、{sourceTagName.text} の形式を使用します。例えば、次の例では、ユーザーが userName フィールドに入力したテキスト値が、コメントテキストボックスの挨拶で使用されます。ユーザーはこのメッセージを変更できます。
<cfformitem type="text">
Enter your name here</cfformitem>
<cftextarea name="userName" height="20" Width="500"/>
<cftextarea name="comment" height="100" Width="500"
bind="Hello {userName.text}! ここにコメントを入力します。"/>
</cfform>
HTML フォームデータのバインディング
bind 属性を使用すると、別のフォームコントロールの値を使用したり、CFC 関数または JavaScript 関数を呼び出すことによって、cftextarea の属性をダイナミックに設定することができます。デフォルトでは、コントロールの value 属性が設定されますが、bindAttribute 属性を使用することで、他の属性を設定することもできます。バインディングについて詳しくは、『ColdFusion アプリケーションの開発』の「フォームフィールドへのデータのバインディング」を参照してください。
例
この例には 2 つの cftextarea コントロールがあります。フォームが送信されると、1 番目のコントロールから 2 番目のコントロールにテキストがコピーされます。onBlur maxlength 検証により、100 文字を超えて入力しないように制限されます。cftextarea 開始タグを閉じる > 文字、タグ本文内のテキストおよび cftextarea 終了タグは、目的のテキストのみが表示されるように 1 行に収められますが、この例では、形式設定を行うために行が分割されています。
<h3>cftextarea の例</h3> <cfparam name="text2" default=""> <cfif isdefined("form.textarea1") AND (form.textarea1 NEQ "")> <cfset text2=form.textarea1> </cfif> <cfform name="form1"> <cftextarea name="textarea1" wrap="virtual" rows="5" cols="25" validate="maxlength" validateAt="onBlur" maxlength="100" >このテキストを置換します。最大の長さは 100 文字で、このテキストの長さは現在 99 文字です。 </cftextarea> <cftextarea name="textarea2" wrap="virtual" rows="5" cols="50" value="#text2#" /><br><br> <input type="submit" value="submit field"><br> </cfform>
