@_yonecoです。フォームのコーディングをしていた際に、inputの項目をユーザーが増やしたり減らしたりできるようにしたいと思い、javascriptでできないかと調べていたときのメモです。
やってみたデモ
「+」のボタンを押すと入力欄が追加されていき、「−」のボタンを押すと入力欄が削除されます。
ソースコード
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).on("click", ".add", function() { $(this).parent().clone(true).insertAfter($(this).parent()); }); $(document).on("click", ".del", function() { var target = $(this).parent(); if (target.parent().children().length > 1) { target.remove(); } }); </script>
HTML
<div id="input_pluralBox"> <div id="input_plural"> <input type="text" class="form-control" placeholder="サンプルテキストサンプルテキストサンプルテキスト"> <input type="button" value="+" class="add pluralBtn"> <input type="button" value="-" class="del pluralBtn"> </div> </div>
CSS
#input_plural { margin: 10px 0; } #input_plural input.form-control { display: inline-block; width: 75%; height: 34px; padding: 6px 12px; font-size: 14px; color: #555; } #input_plural input.pluralBtn { width: 30px; height: 30px; border: 1px solid #ccc; background: #fff; border-radius: 5px; padding: 0; margin: 0; }
コメント
はじめまして。
フォームに文字を入力したまま増やすとその文字ごとコピーされてしまうのですが、空欄のフォームのみ増やす方法を教えていただけないでしょうか?
こちらお返事遅れました!たしかに紹介しているやり方だとフォームに文字を入力したあとに増やすと、文字ごと複製されてしまいますね…!
このやり方とは違うのですが、jQueryプラグインのSheepIt!でしたら、文字が入力されていても空欄のフォームを増やすことが可能ですので、
よかったら以下よりダウンロードして試してみてくださいませ!
https://github.com/mdelrosso/sheepit