# Textarea

TextareaはInputと似ている機能です。Dashcombが提供しているTextareaは、通常のHTMLのTextareaをベースにしています。管理画面の用途に合わせて、バリデーションの機能を内蔵しています。用途によって、複数のバリデーションのパターンから選んで設定できます。

バリデーションは Dashcombが提供している標準的なバリデーション以外にも、正規表現を使って独自のバリデーションパターンを設定できます。

***

## プロパティ

Textareaコンポーネントには、以下のプロパティが含まれています。

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-81c8b8a6304b9f286e7c4545304ae211cdd5fefd%2FUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%9A%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%AA%E3%82%A2%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

### 共通 <a href="#common" id="common"></a>

### オブジェクト

テキストエリアオブジェクトの変数名です。Textareaコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に `textarea1`、`textarea2`... と名付けられます。

ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。

（例）`{{textarea.value}}` で `textarea1` の表示状態の真偽値を取得することができます。

利用できるオブジェクトとプロパティは、[インスペクターメニュー](https://docs.dashcomb.com/dashcomb-help-center/ide/region/inspector-region) で確認できます。

#### 非表示

トグルスイッチをONにすると、テキストエリアが非表示になります。

現在の設定値は、`{{オブジェクト名.readonly}}` で参照できます。

#### 無効

トグルスイッチをONにすると、テキストエリアが無効になり、入力できなくなります。

通常のhtmlのtextarea 要素のdisabled 属性に該当します。

現在の設定値は、`{{オブジェクト名.disabled}}` で参照できます。

#### 読取専用

トグルスイッチをONにすると、テキストエリアが読取専用になり、値を変更できなくなります。

通常のhtmlのtextarea要素のreadonly属性に該当します。

現在の設定値は、`{{オブジェクト名.readonly}}` で参照できます。

#### 入力必須

トグルスイッチをONにすると、テキストエリアが必須入力になります。

通常のhtmlのtextarea要素のrequired属性に該当します。

現在の設定値は、`{{オブジェクト名.required}}` で参照できます。

###

### データ

#### ラベル文字

テキストエリアの項目名を表すラベルテキストです。Textareaコンポーネントをドラッグ＆ドロップすると、自動的に `TextArea` に設定されます。

`TextArea` を任意の文字列に入れ替えることはもちろん、構文 `{{オブジェクト名.プロパティ}}` を入れることにより、動的に設定することができます。

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](https://docs.dashcomb.com/dashcomb-help-center/ide/obujekutoyadtano) のページを参照してください。
{% endhint %}

#### 入力ヒント

テキストエリアのプレースホルダーです。テキストエリアに何も入力されていない場合に、入力例として表示されます。

通常の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にすると、テキストエリアのラベルが非表示になりますが、テキストエリア本体に影響はありません。

以下の項目で表示を調整できます。

<table><thead><tr><th width="133">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>ラベル整列</td><td>ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。</td><td></td></tr><tr><td>ラベル位置</td><td>ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。</td><td></td></tr><tr><td>ラベル横幅</td><td>ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。</td><td></td></tr></tbody></table>