CODEWITHSUNDEEP
javascriptjqueryhtmlcsstextarea
Fizzix
Fizzix

Reputation: 24365

Textarea that grows and shrinks with content to a maximum height

First of all, I know that similar questions to this have been asked here, although none of them specifically do what my title asks for.

I am trying to create a simple textarea input that grows and shrinks in height according to its content, but to a maximum height only. Once the maximum height has been met, it will scroll vertically.

I came across a pure CSS and HTML solution, although unfortunately it is not cross browser, and could be quite buggy. But it should give you all a good idea of what I am trying to achieve.

HTML:

<div contenteditable>
    type here...
</div>

CSS:

div[contenteditable] {
    border: 1px solid black;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 200px;
}

WORKING EXAMPLE

Is there a solution, that does not use contenteditable, that can replicate the above example using only a text input or textarea?

Upvotes: 1

Views: 1274

Answers (1)

Garconis
Garconis

Reputation: 784

I was looking for a solution to the same problem, and realized that using the elastic javascript solution seemed to be the best all-around solution. Tested in in all modern browsers, including back to IE9:

View working demo here: http://jsfiddle.net/mupbrtpv/

Use a max-height of your choice on the textarea to prevent the height from expanding beyond your desired limit.

HTML:

<textarea id="description" placeholder="input your text here"></textarea>

CSS:

textarea#description{width: 300px; max-height: 400px;}

Javscript:

$('#description').elastic();

Upvotes: 1

Related Questions