I need to make a textarea increase in height as it fills with text. I previously had a JavaScript/JQuery solution for this
function expandingTextBox(e) {
$(e).css({'height':'80', 'overflow-y':'hidden'}).height(e.scrollHeight);
}
$('textarea').each(function(){
expandingTextBox(80);
}).on('input', function() {
expandingTextBox(this);
});
And this almost served the purpose. Briefly, I have a popup in my web application, and I want to be able to drag objects from elsewhere, and dump them in my popup, creating new textareas that resize to fit their contents. This function only resizes textareas as I type in them.
A colleague thinks I can do this with CSS alone -- no JavaScript or JQuery plugins? Every other solution I've found on the interwebs relies on at least some JQuery plugin (and I can't download new plugins onto my machine at work so easily). Is there a way with just CSS?
I've tried changing textareas to divs, and using the contenteditable attribute. This caused problems elsewhere (but it'd take a long time to explain why).
Thx -- Gaweyne
EDIT: If it is impossible with pure CSS, I'd accept solutions that use JavaScript or JQuery that I don't need to download additional plugins for.
Use event delegation to handle dynamically-added elements.
Move the CSS to a style sheet.
On input, set the height to 80, then set it to the scroll height.
Snippet
$('button').on('click', function() {
$('<textarea/>').appendTo('body').focus();
});
$(document).on('input', 'textarea', function() {
$(this).height(80).height(this.scrollHeight);
});
textarea {
vertical-align: top;
height: 80px;
overflow-y: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add new textarea</button>
<hr>
<textarea></textarea>