Textarea
TextareaはInputと似ている機能です。Dashcombが提供しているTextareaは、通常のHTMLのTextareaをベースにしています。管理画面の用途に合わせて、バリデーションの機能を内蔵しています。用途によって、複数のバリデーションのパターンから選んで設定できます。
バリデーションは Dashcombが提供している標準的なバリデーション以外にも、正規表現を使って独自のバリデーションパターンを設定できます。
プロパティ
Textareaコンポーネントには、以下のプロパティが含まれています。
共通
オブジェクト
テキストエリアオブジェクトの変数名です。Textareaコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に textarea1、textarea2... と名付けられます。
ここで設定した変数名は、構文 {{オブジェクト名.プロパティ}} でオブジェクトを参照するために利用できます。
（例）{{textarea.value}} で textarea1 の表示状態の真偽値を取得することができます。
利用できるオブジェクトとプロパティは、インスペクターメニュー で確認できます。
非表示
トグルスイッチをONにすると、テキストエリアが非表示になります。
現在の設定値は、{{オブジェクト名.readonly}} で参照できます。
無効
トグルスイッチをONにすると、テキストエリアが無効になり、入力できなくなります。
通常のhtmlのtextarea 要素のdisabled 属性に該当します。
現在の設定値は、{{オブジェクト名.disabled}} で参照できます。
読取専用
トグルスイッチをONにすると、テキストエリアが読取専用になり、値を変更できなくなります。
通常のhtmlのtextarea要素のreadonly属性に該当します。
現在の設定値は、{{オブジェクト名.readonly}} で参照できます。
入力必須
トグルスイッチをONにすると、テキストエリアが必須入力になります。
通常のhtmlのtextarea要素のrequired属性に該当します。
現在の設定値は、{{オブジェクト名.required}} で参照できます。
データ
ラベル文字
テキストエリアの項目名を表すラベルテキストです。Textareaコンポーネントをドラッグ＆ドロップすると、自動的に TextArea に設定されます。
TextArea を任意の文字列に入れ替えることはもちろん、構文 {{オブジェクト名.プロパティ}} を入れることにより、動的に設定することができます。
{{}} 構文については、オブジェクトやデータの参照 のページを参照してください。
入力ヒント
テキストエリアのプレースホルダーです。テキストエリアに何も入力されていない場合に、入力例として表示されます。
通常のhtmlのtextarea要素のplaceholder属性に該当します。
{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。
現在の設定値は、{{オブジェクト名.placeholder}} で参照できます。
デフォルト値
テキストエリアのデフォルト値です。画面を開いた時点で、value属性に自動的に設定される値を指定します。初期値は空文字列（""）です。
{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。
現在の設定値は、{{オブジェクト名.defaultValue}} で参照できます。
最小文字数
入力を受付ける最小文字数を数値で指定します。
最大文字数
入力を受付ける最大文字数を数値で指定します。
かな／カナ
制限なし, ひらがなのみ, カタカナのみ から選択します。
正規表現（機能のON/OFF）
正規表現でのバリデーションを設定することができます。トグルスイッチをONにすると、設定欄が表示されます。
正規表現
バリデーションに利用する正規表現の式を記入します。
正規表現式に加えて、{{オブジェクト名.プロパティ}} 構文を用いて、バリデーションの条件を動的に設定することができます。
{{currentUser.name}}+[a-zA-Z0-9_.+-]+@gmail.com を入力することで、Gmailかどうか、もしくは現在の使用者の名前に似ているメールアドレスかどうかの検証ができます。
エラーメッセージ
正規表現による文字列を検証の結果、エラーになった場合に表示するメッセージを記入します。
{{オブジェクト名.プロパティ}} によって、動的に設定することも可能です。
（例）{{currentUser.name}}さん、Gmailを入力してください を入力することで、エラーメッセージに現在のユーザーの名前を動的に入れることができます。
アクション
Textareaコンポーネントのアクションは、以下を設定することができます。
onChange
テキストエリアのonChange イベントの発生時（Textareaの入力内容が変更された時）に、指定アクションを実行できます。
onForcus
テキストエリアのonForcus イベントの発生時（Textareaがフォーカス状態になった時）に、指定アクションを実行できます。
onBlur
テキストエリアのonBlur イベントの発生時（Textareaがフォーカス状態でなくなった時）に、指定アクションを実行できます。
onEnter
テキストエリアのonEnter イベントの発生時（Textareaがフォーカス状態でEnterキーを押された時）に、指定アクションを実行できます。
外観
高さ
Textareaコンポーネントの高さを指定します。初期設定では2行に設定されており、最小設定は1行です。
ラベル
テキストエリアのラベルテキストの表示・非表示を切り替えます。
トグルスイッチをOFFにすると、テキストエリアのラベルが非表示になりますが、テキストエリア本体に影響はありません。
以下の項目で表示を調整できます。
| 項目名 | 設定内容 |
|---|---|
ラベル整列 | ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。 |
ラベル位置 | ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。 |
ラベル横幅 | ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。 |
最終更新
