Input

Inputのモジュール

詳しい導入事例は導入方法を参照してください。

  • DEMO
  • ラベル表示

日付

説明

説明

0

使い方

*-input-*の[type]は自由に設定してください。

メールアドレスの場合は+-.form-wrap-+に+-.email-+クラスを付与することで、メールアドレス形式の入力以外の時にエラーを表示します。

+-.form-label-txt-+と+-.form-meta-+はタイトルと説明の入力箇所になりますが、不要な場合でも空で設置してください。（スクリプトによる表示追加の際にエラーが起きます）
  • HTML

    
    

      
description

文字数

+-.form-wrap-+に[data-count]属性を追加し、任意の数値を入れることで文字数カウントと制限を追加出来ます。
空か0の場合はカウントのみ、0以上の数値で入力値までの制限になります。
文字数制限の場合は超過分は削除となります。

<div class="form-wrap" data-count="">

  • DEMO

文字数カウント

文字数制限

必須設定

+-.form-wrap-+に+-.req-+クラス追加でrequirednの設定になります。
*-input-*にはJSでrequiredを追加します。

  • DEMO

必須設定

数字のみ

+-.form-wrap-+に+-.num-+クラス追加で数字以外の入力を禁止します。

  • DEMO

数字のみ入力可

単位表示

+-.form-wrap-+に[data-unit_left]属性を付与し、任意の値を入れることで左側に単位を追加。
+-.form-wrap-+に[data-unit_right]属性を付与し、任意の値を入れることで右側に単位を追加。

  • DEMO

単位：左

単位：右

自動生成用コード

上記のややこしいHTMLをScriptで自動生成します

設置したい場所に下記の*-input-*を設置して、任意の値を入れてください。

  • HTML
<input class="dataset-inpt"
    data-type=""
    data-id=""
    name=""
    value=""
    placeholder=""
    autocomplete=""
    inputmode=""
    data-title=""
    data-dsc=""
    data-class=""
    data-count=""
    data-unit_left=""
    data-unit_right=""
  type="hidden">
  • [data-type] type属性を指定
  • [data-id] id属性を指定
  • [name] name属性を指定
  • [value] value属性を指定
  • [placeholder] placeholder属性を指定
  • [autocomplete] autocomplete属性を指定
  • [inputmode] inputmode属性を指定
  • [data-title] labelに入る名前指定
  • [data-dsc] 説明文指定
  • [data-class] オプション用のクラスやオリジナルのクラス指定
  • [data-count] カウントオプション指定：空か無で設定無し、0でカウント、0以上の数値で文字数制限
  • [data-unit_left] 単位表示オプション指定
  • [data-unit_right] 単位表示オプション指定

使用しない属性は削除可能。