テキストエリア（textarea）

複数行のプレーンテキスト編集コントロールを表し、レビューのコメントや問い合わせフォーム等のように、ユーザが大量の自由記述テキストを入力できるようにするときに便利です。

使い所の例

ユーザーコメントフォーム:

ウェブサイトやブログにユーザーがコメントを投稿できるセクションを設ける際に、テキストエリアを使用します。
フィードバックフォーム:

製品やサービスに対するユーザーのフィードバックを収集するためにテキストエリアを使用します。
問い合わせ内容入力:

お客様向けのサイトで、ユーザーが問い合わせ内容を投稿する際にテキストエリアを使用します。

テキストエリアタグは、複数行のテキスト入力を必要とする場合に非常に便利です。ユーザーコメント、フィードバックフォーム、問い合わせ内容入力など、様々なシナリオで使用されます。適切な属性を設定することで、ユーザーが使いやすい入力フィールドを提供し、データを効率的に収集することができます。

カラムの中に100％で配置したい場合は下記のwidthプロパティではなくスタイルシートにて設定します。 スタイルに以下の記述を行います。

.textarea_1 {

min-width:100%;

}

テキストエリアに対して textarea_1クラスを設定します。

コンポーネントを配置すると、デフォルトで以下のコードが定義されます。

以下のプロパティがあります。

高さを設定するには heightプロパティに5など行数を入力します。

プロパティ	内容
Data	Magic プログラムで定義されたコントロールを指定します。歯車ボタンをクリックするとコントロール一覧が表示されます。ここから選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
is inside Table	テーブル内に配置する場合はチェックをつけます。追加することで[rowId]=”row.rowId”タグが追加されます。
Show Control	コントロールを表示するかどうかを指定します。以下から選択できます。 “Is Inside Table” がチェックされている場合のみ有効です。 None … 常に表示されます。 Is Row Edit … 修正モード時のみ表示されます。 Is Row Read … 照会モード時のみ表示されます。
Required	エンドユーザがコントロールに値を入力する必要があるかどうかを指定します。
Text Transformation	テキストの変換方法を指定します。以下から選択できます。 Default … 変換しません。 Uppercase … 大文字に変換します。 Lowercase … 小文字に変換します。 Capitalize … 先頭文字のみ大文字に変換します。
Display If	コントロールを表示させるかどうか指定します。 Is Visibleと似ていますが論理型の式を設定し、 True,Falseで指定します。他　mg.getValue(mgc.XXXXXXXXXX) !=”　と入力するとXXXXXXXXXXが空白以外の場合はTrueになるので表示されます。
Disabled	表示、非表示ではなく有効、無効を設定いたします。 mg.isDisabled(mgc.XXXXXXXXXX)とすることでMagicの有効無効と関連付けられます。
Hint	コントロールのヒントとして使用されるテキスト。ヒントは、タイプ入力している間に自動的に削除される［エディット］コントロールの上で表示されるテキストです。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。
Tooltip	コントロールに関連付けるツールチップを指定します。マウスカーソルをこのコントロールに置くと指定された文字が表示されます。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 mg.getTitle(mgc.XXXXXXXXXX) にてMagicで設定されたツールチップを表示させることが可能です。
Width	幅を指定します。
Height	高さを指定します。

テキストエリア（textarea）

使い所の例

ユーザーコメントフォーム:

フィードバックフォーム:

問い合わせ内容入力:

関連記事