0
475
ViewsCSS Textarea that expands as you type text
I have a Textarea where users can input text. By default it has a height of 17px. However if users insert a large amount of text, I want the text area to expand accordingly. Is there a way to do this with CSS ? Thanks in advance!!
3 answers
Answer question0
I know this is a little bit late, but I have to say there is a way to use <div> with contenteditable attribute to simulate desired behaviour.
.textareaElement {
width: 300px;
min-height: 17px;
border: 1px solid #ccc;
max-height: 150px;
overflow-x: hidden;
overflow-y: auto;
}<div class="textareaElement" contenteditable></div>Just set your min and max height, with proper overflow values, and you have fully functional pure CSS expanding textbox, that is also well supported.
0
This cannot be done with CSS alone. try the autogrow jquery plugin. https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js
You can also see autogrow demo here http://onehackoranother.com/projects/jquery/jquery-grab-bag/autogrow-textarea.html
It's lightweight and easy to use. Here's how it's done. Define your textarea id. Include the jquery js file before </body>. Then between script tags, issue the jquery command $("#txtInput").autoGrow();
<body>
<textarea id="txtInput"></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script>
$("#txtInput").autogrow();
</script>
</body>
0
This jQuery plugin is a really great one: http://www.jacklmoore.com/autosize
I've tested a bunch of these and this is by far the nicest. Also gives an example of using a CSS transition effect which is pretty slick.