# Input Input は、ユーザー入力で最も重要な機能です。Dashcombが提供しているInputは、通常のHTMLのInputをベースにして、管理画面の用途に合わせて、バリデーションの機能を内蔵しています。用途によって、複数のバリデーションのパターンから選んで設定できます。 バリデーションは Dashcombが提供している標準的なバリデーション以外にも、正規表現を使って独自のバリデーションパターンを設定できます。 *** ## プロパティ Inputコンポーネントには、以下のプロパティが含まれています。
### 共通 #### **オブジェクト** インプットオブジェクトの変数名です。Inputコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に `input1`、`input2`... と名付けられます。 ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。 （例）`{{input1.hidden}}` で `input1` の表示状態の真偽値を取得することができます。 利用できるオブジェクトとプロパティは、[インスペクターメニュー](/dashcomb-help-center/ide/region/inspector-region.md) で確認できます。 #### 非表示 トグルスイッチをONにすると、インプットが非表示になります。 現在の設定値は、`{{オブジェクト名.readonly}}` で参照できます。 #### 無効 トグルスイッチをONにすると、インプットが無効になり、入力できなくなります。 通常のhtmlのinput要素のdisabled属性に該当します。 現在の設定値は、`{{オブジェクト名.disabled}}` で参照できます。 #### 読取専用 トグルスイッチをONにすると、インプットが読取専用になり、値を変更できなくなります。 通常のhtmlのinput要素のreadonly属性に該当します。 現在の設定値は、`{{オブジェクト名.readonly}}` で参照できます。 #### 入力必須 トグルスイッチをONにすると、インプットが必須入力になります。 通常のhtmlのinput要素のrequired属性に該当します。 現在の設定値は、`{{オブジェクト名.required}}` で参照できます。 ### データ #### ラベル文字 インプットの項目名を表すラベルテキストです。Inputコンポーネントをドラッグ＆ドロップすると、自動的に `Input` に設定されます。 `Input` を任意の文字列に入れ替えることはもちろん、構文 `{{オブジェクト名.プロパティ}}` を入れることにより、動的に設定することができます。 {% hint style="info" %} `{{}}` 構文については、[オブジェクトやデータの参照](/dashcomb-help-center/ide/obujekutoyadtano.md) のページを参照してください。 {% endhint %} #### 入力ヒント インプットのプレースホルダーです。インプットに何も入力されていない場合に、入力例として表示されます。 通常のhtmlのinput要素のplaceholder属性に該当します。 `{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。 現在の設定値は、`{{オブジェクト名.placeholder}}` で参照できます。 #### デフォルト値 インプットの初期値です。画面を開いた時点で、value 属性に自動的に設定される値を指定します。初期値は空文字列（""）です。 `{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。 現在の設定値は、`{{オブジェクト名.defaultValue}}` で参照できます。 ### アクション Inputコンポーネントのアクションは、以下を設定することができます。 #### **onChange** インプットのonChange イベントの発生時（Inputの入力内容が変更された時）に、指定アクションを実行できます。 **onForcus** インプットのonForcus イベントの発生時（Inputがフォーカス状態になった時）に、指定アクションを実行できます。 **onBlur** インプットのonBlur イベントの発生時（Inputがフォーカス状態でなくなった時）に、指定アクションを実行できます。 **onEnter** インプットのonEnter イベントの発生時（Inputがフォーカス状態でEnterキーを押された時）に、指定アクションを実行できます。 ### 外観 #### **ラベル** インプットのラベルテキストの表示・非表示を切り替えます。 トグルスイッチをOFFにすると、インプットのラベルが非表示になりますが、インプット本体に影響はありません。 以下の項目で表示を調整できます。
項目名設定内容
ラベル整列ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。
ラベル位置ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。
ラベル横幅ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。
### ### 入力種別 インプットに入力される内容のパターンを設定します。最大文字数、最小文字数などの制限を設定できます。 選択したパターンごとに、入力内容に対する制限項目が変化します。 #### 共通：正規表現 選択した入力パターンの種類にかかわらず、正規表現でのバリデーションを設定することができます。 トグルスイッチをONにすると、設定欄が表示されます。 **正規表現** バリデーションに利用する正規表現の式を記入します。 正規表現式に加えて、`{{オブジェクト名.プロパティ}}` 構文を用いて、バリデーションの条件を動的に設定することができます。 `{{currentUser.name}}+[a-zA-Z0-9_.+-]+@gmail.com` を入力することで、Gmailかどうか、もしくは現在の使用者の名前に似ているメールアドレスかどうかの検証ができます。 **エラーメッセージ** 正規表現による文字列を検証の結果、エラーになった場合に表示するメッセージを記入します。 `{{オブジェクト名.プロパティ}}` によって、動的に設定することも可能です。 （例）`{{currentUser.name}}さん、Gmailを入力してください` を入力することで、エラーメッセージに現在のユーザーの名前を動的に入れることができます。 ### 入力種別のパターンと入力制限の項目 入力種別のパターンを選択することで、ユーザーの入力内容に制限を加えることができます。 選択したパターンごとに、入力内容に対する制限項目が変化します。 #### **テキスト** パターンのデフォルト値で、一番汎用的なパターンです。汎用性を保ちながら、独自の正規表現を利用してバリデーションを定義できます。 テキストのパターンを選択した場合は、以下の制限項目を設定することができます。
項目名設定内容
最小文字数入力を受付ける最小文字数を数値で指定します。
最大文字数入力を受付ける最大文字数を数値で指定します。
かな／カナ制限なし, ひらがなのみ, カタカナのみ　から選択します。
#### **数値** 数値の入力のみ受け入れます。入力された内容が数値として解析できない場合、値は自動的に空にセットされます　。 数値のパターンを選択した場合は、以下の制限項目を設定することができます。
項目名設定内容
最小値入力を受付ける最小値を数値で指定します。
最大値入力を受付ける最大値を数値で指定します。
小数桁数入力を受付ける小数桁数を数値で指定します。指定した桁数より多くの桁数が入力された場合、値は四捨五入されます。
増減値インプットボックスの右端に表示される△▽をクリックした際に変化する値を数値で指定します。
正負の数制限なし／正の数とゼロのみ／負の数とゼロのみ　から選択しま。
#### **パスワード** パスワードの基準の設定を簡単に設定できます。 パスワードのパターンを選択した場合は、以下の制限項目を設定することができます。
項目名設定方法
最小文字数入力を受付ける最小文字数を数値で指定します。
最大文字数入力を受付ける最大文字数を数値で指定します。
最低1文字の大文字が必須トグルスイッチをONにすると、入力されたパスワードにアルファベットの大文字を含むことを強制します。
最低1文字の数字が必須トグルスイッチをONにすると、入力されたパスワードに数字を含むことを強制します。
最低1文字の記号が必須トグルスイッチをONにすると、入力されたパスワードに記号を含むことを強制します。
#### **URL** httpとhttpsの設定を同時に選択できる[RFC1738](https://www.rfc-editor.org/rfc/rfc1738)のURL規格に沿ったバリデーションが自動的に設定されます。 #### **メールアドレス** [RFC2822](https://www.rfc-editor.org/rfc/rfc2822)に準拠したEmailのバリデーションが自動的に設定されます。 自社のEmail仕様に準拠したい場合は独自の正規表現を使って、バリデーションすることができます。 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/input.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.