In der Höhe anpassbare Textarea und duplizierbare Formularfelder
Hat grosse Probleme in den alten IE.
HTML
<script src="https://raw.github.com/padolsey/jQuery.fn.autoResize/master/jquery.autoresize.js"></script>
<div id="ta1" class="clearfix" data-id="1">
<label for="textarea-1">Textarea</label>
<textarea name="textarea-1" id="textarea-1" cols="30" rows="1"></textarea>
</div>
<div id="ta2" class="clearfix" data-id="2">
<label for="textarea-2">Textarea</label>
<textarea name="textarea-2" id="textarea-2" cols="30" rows="1"></textarea>
</div>
<button class="btnAdd">neue Zeile hinzufügen</button>
CSS
body {padding: 40px;}
div { margin-bottom: 10px;}
label, textarea {display: block;}
textarea {
width: 60%;
background-color: #ddd;
border: none;border-bottom: 1px solid #a20000; border-right: 1px solid #a20000;
font-size: 12px;
height: 14px;
min-height: 14px;
line-height: 1.25;
}
button {
border: 1px solid #999;
background-color: #a20000;
color: #fff;
padding: 5px;
margin-top: 10px;
}
JavaScript
$(document).ready(function() {
// https://github.com/padolsey/jQuery.fn.autoResize
$('textarea').autoResize({
extraSpace:14,
minHeight: 14
});
// Grundidee: http://charlie.griefer.com/blog/2009/09/17/jquery-dynamically-adding-form-elements/
$('.btnAdd').on('click', function(e) {
var num = $(this).prev().attr("data-id");
var num = new Number(num);
var newNum = num+1;
var newElem = $('#ta' + num).clone().attr({
id: 'ta' + newNum,
'data-id': newNum
});
newElem.children("label").attr("for", "textarea" + newNum).end()
.children('textarea').attr({
id: 'textarea' + newNum,
name: 'textarea' + newNum
});
$('#ta' + num).after(newElem);
e.preventDefault();
});
});