jquery.addInputArea
Latest: v4.9.0 (2017-05-03)
Demo
https://sutara79.github.io/jquery.add-input-area/GitHub
https://github.com/sutara79/jquery.add-input-area
入力欄を動的に増減させることができます。
テキストボックス、テキストエリアの両方に対応しています。
ライセンス
MITライセンス (http://www.opensource.org/licenses/mit-license.php)※改変、再配布はご自由にどうぞ。
使用にあたっての注意点
増減する入力欄には、下記のようにCSSクラスを指定する必要があります。
要素の種類は問いません。
li でも tr でもOKです。
また、子孫関係も、直下に置く必要はありません。
<* id="hoge">
<* class="hoge_var"(この要素が増減する)>
<input name="hoge_0">
<* class="hoge_del"(削除ボタン)>
<* class="hoge_add"(追加ボタン。リストの外に置く。)>
【例】
<ul id="list1">
<li class="list1_var">
<input type="text" name="list1_0">
<button class="list1_del">削除<button>
</li>
</ul>
<button class="list1_add">追加</button>
入力欄のname, id属性は(任意の文字列) + (番号)の形式で記述して下さい。
番号は必ずゼロから始めて下さい。
"任意の文字列"の末尾は、当然、数字で終わってはいけません。
アンダースコア"_"を挟んだりして対処して下さい。
例: list2_0
ただし、独自属性の'data-name-format', 'data-id-format'を設定することで柔軟なname, id属性を名付けられます。
CakePHPのname属性の形式などに対応できます。 (data[posts][mail][0] など)
<label data-id-format="hoge_%d_fuga" for="hoge_0_fuga">
<input data-id-format="hoge_%d_fuga" id="hoge_0_fuga" data-name-format="hoge_%d_fuga" name="hoge_0_fuga">
id, for属性は"data-id-format"属性、name属性は"data-name-format"属性に従って連番を与えられます。
独自属性の"data-id-format", "data-name-format"を使わない場合は、共通の命名規則の(任意の文字列) + (番号)に従ってください。
プラグインは、リスト項目内でname属性を持つ要素のname属性とid属性、そして、for属性を持つ要素のfor属性を書き換えます。
input要素だけでなく、どんな要素に対しても実行するので、注意して下さい。
オプション
各オプションの名前をクリックすると、使用例のページへジャンプします。| 名前 | 型 | 初期値 | 説明 |
|---|---|---|---|
| area_var | string | '.(id)_var' | 増減する要素のCSSクラス名 |
| btn_add | string | '.(id)_add' | 追加ボタンのCSSクラス名 |
| btn_del | string | '.(id)_del' | 削除ボタンのCSSクラス名 |
| area_del | string | (btn_del) | 削除ボタンを包む要素のCSSクラス名 |
| after_add | function | null | 追加後に実行される関数 |
| clone_event | boolean | true | JavaScriptイベントをコピーするかどうか |
| maximum | number | 0 | 最大数。"0"は無制限を表す |
