Input
最終更新
最終更新
Input は、ユーザー入力で最も重要な機能です。Dashcombが提供しているInputは、通常のHTMLのInputをベースにして、管理画面の用途に合わせて、バリデーションの機能を内蔵しています。用途によって、複数のバリデーションのパターンから選んで設定できます。
バリデーションは Dashcombが提供している標準的なバリデーション以外にも、正規表現を使って独自のバリデーションパターンを設定できます。
Inputコンポーネントには、以下のプロパティが含まれています。
インプットオブジェクトの変数名です。Inputコンポーネントをドラッグ&ドロップすると、そのオブジェクトが自動的に input1
、input2
... と名付けられます。
ここで設定した変数名は、構文 {{オブジェクト名.プロパティ}}
でオブジェクトを参照するために利用できます。
(例){{input1.hidden}}
で input1
の表示状態の真偽値を取得することができます。
利用できるオブジェクトとプロパティは、インスペクターメニュー で確認できます。
トグルスイッチをONにすると、インプットが非表示になります。
現在の設定値は、{{オブジェクト名.readonly}}
で参照できます。
トグルスイッチをONにすると、インプットが無効になり、入力できなくなります。
通常のhtmlのinput要素のdisabled属性に該当します。
現在の設定値は、{{オブジェクト名.disabled}}
で参照できます。
トグルスイッチをONにすると、インプットが読取専用になり、値を変更できなくなります。
通常のhtmlのinput要素のreadonly属性に該当します。
現在の設定値は、{{オブジェクト名.readonly}}
で参照できます。
トグルスイッチをONにすると、インプットが必須入力になります。
通常のhtmlのinput要素のrequired属性に該当します。
現在の設定値は、{{オブジェクト名.required}}
で参照できます。
インプットの項目名を表すラベルテキストです。Inputコンポーネントをドラッグ&ドロップすると、自動的に Input
に設定されます。
Input
を任意の文字列に入れ替えることはもちろん、構文 {{オブジェクト名.プロパティ}}
を入れることにより、動的に設定することができます。
{{}}
構文については、オブジェクトやデータの参照 のページを参照してください。
インプットのプレースホルダーです。インプットに何も入力されていない場合に、入力例として表示されます。
通常のhtmlのinput要素のplaceholder属性に該当します。
{{オブジェクト名.プロパティ}}
構文を用いて、動的に設定することができます。
現在の設定値は、{{オブジェクト名.placeholder}}
で参照できます。
インプットの初期値です。画面を開いた時点で、value 属性に自動的に設定される値を指定します。初期値は空文字列("")です。
{{オブジェクト名.プロパティ}}
構文を用いて、動的に設定することができます。
現在の設定値は、{{オブジェクト名.defaultValue}}
で参照できます。
Inputコンポーネントのアクションは、以下を設定することができます。
インプットのonChange イベントの発生時(Inputの入力内容が変更された時)に、指定アクションを実行できます。
onForcus
インプットのonForcus イベントの発生時(Inputがフォーカス状態になった時)に、指定アクションを実行できます。
onBlur
インプットのonBlur イベントの発生時(Inputがフォーカス状態でなくなった時)に、指定アクションを実行できます。
onEnter
インプットのonEnter イベントの発生時(Inputがフォーカス状態でEnterキーを押された時)に、指定アクションを実行できます。
インプットのラベルテキストの表示・非表示を切り替えます。
トグルスイッチをOFFにすると、インプットのラベルが非表示になりますが、インプット本体に影響はありません。
以下の項目で表示を調整できます。
インプットに入力される内容のパターンを設定します。最大文字数、最小文字数などの制限を設定できます。
選択したパターンごとに、入力内容に対する制限項目が変化します。
選択した入力パターンの種類にかかわらず、正規表現でのバリデーションを設定することができます。
トグルスイッチをONにすると、設定欄が表示されます。
正規表現
バリデーションに利用する正規表現の式を記入します。
正規表現式に加えて、{{オブジェクト名.プロパティ}}
構文を用いて、バリデーションの条件を動的に設定することができます。
{{currentUser.name}}+[a-zA-Z0-9_.+-]+@gmail.com
を入力することで、Gmailかどうか、もしくは現在の使用者の名前に似ているメールアドレスかどうかの検証ができます。
エラーメッセージ
正規表現による文字列を検証の結果、エラーになった場合に表示するメッセージを記入します。
{{オブジェクト名.プロパティ}}
によって、動的に設定することも可能です。
(例){{currentUser.name}}さん、Gmailを入力してください
を入力することで、エラーメッセージに現在のユーザーの名前を動的に入れることができます。
入力種別のパターンを選択することで、ユーザーの入力内容に制限を加えることができます。
選択したパターンごとに、入力内容に対する制限項目が変化します。
パターンのデフォルト値で、一番汎用的なパターンです。汎用性を保ちながら、独自の正規表現を利用してバリデーションを定義できます。
テキストのパターンを選択した場合は、以下の制限項目を設定することができます。
数値の入力のみ受け入れます。入力された内容が数値として解析できない場合、値は自動的に空にセットされます 。
数値のパターンを選択した場合は、以下の制限項目を設定することができます。
パスワードの基準の設定を簡単に設定できます。
パスワードのパターンを選択した場合は、以下の制限項目を設定することができます。
httpとhttpsの設定を同時に選択できるRFC1738のURL規格に沿ったバリデーションが自動的に設定されます。
RFC2822に準拠したEmailのバリデーションが自動的に設定されます。
自社のEmail仕様に準拠したい場合は独自の正規表現を使って、バリデーションすることができます。
項目名 | 設定内容 |
---|---|
項目名 | 設定内容 |
---|---|
項目名 | 設定内容 |
---|---|
項目名 | 設定方法 |
---|---|
ラベル整列
ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。
ラベル位置
ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。
ラベル横幅
ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。
最小文字数
入力を受付ける最小文字数を数値で指定します。
最大文字数
入力を受付ける最大文字数を数値で指定します。
かな/カナ
制限なし, ひらがなのみ, カタカナのみ から選択します。
最小値
入力を受付ける最小値を数値で指定します。
最大値
入力を受付ける最大値を数値で指定します。
小数桁数
入力を受付ける小数桁数を数値で指定します。指定した桁数より多くの桁数が入力された場合、値は四捨五入されます。
増減値
インプットボックスの右端に表示される△▽をクリックした際に変化する値を数値で指定します。
正負の数
制限なし/正の数とゼロのみ/負の数とゼロのみ から選択しま。
最小文字数
入力を受付ける最小文字数を数値で指定します。
最大文字数
入力を受付ける最大文字数を数値で指定します。
最低1文字の大文字が必須
トグルスイッチをONにすると、入力されたパスワードにアルファベットの大文字を含むことを強制します。
最低1文字の数字が必須
トグルスイッチをONにすると、入力されたパスワードに数字を含むことを強制します。
最低1文字の記号が必須
トグルスイッチをONにすると、入力されたパスワードに記号を含むことを強制します。