Textarea

Textareaのモジュール

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

  • DEMO
  • ラベル表示

説明

説明

使い方

幅や高さは別途指定してください。

  • HTML

    
    

      
description

文字数

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

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

  • DEMO

文字数カウント

文字数制限

必須設定

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

  • DEMO

必須設定

自動生成用コード

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

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

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

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