Input Field That Gets Taller As You Type

I was wonder how I can create a text input that has an auto-adjustable height so that it gets taller to fit your text? For example, if I start typing a paragraph, it expands from a

Solution 1:

Here's a CSS-only solution: Use a div with contenteditable set to true.

<div contenteditable="true"
    style="width:200px;min-height:20px;border:1px solid #ccc;"></div>

See this JSFiddle for an example.

EDIT: If you want to be able to submit this text, you'll need a little bit of javascript to put it into an input field. Add this to your form:

<form onsubmit="document.getElementById('hidden_data').value=document.getElementById('showing_data').innerHTML;">
    <input id="hidden_data" name="data" type="hidden"/>
    <div id="showing_data" contenteditable="true"
        style="width:200px;min-height:20px;border:1px solid #ccc;"></div>
</form>

This will put the contents of the div into a hidden input field so it will be submitted to the server through POST with anything else.

See this (updated) JSFiddle for an example.

Solution 2:

Take a look at this post here:

Creating a textarea with auto-resize

It has all the code needed (HTML and Javascript) to accomplish what you want.