How to make textarea's height auto adjustable with respect to the placeholder content?

Question

I have textarea field with long placeholder. It looks good in big screens. But when I open in small screens some part of placeholder becomes hidden and I have to scroll down.

I want placeholder to adjust its height automatically without any scroll.

I tried a lot but I could not figure it out.

Is this really possible to adjust textarea height according to the amount of text in placeholder?

Example is in this jsfiddle and snippet:

 textarea { width: 100%; padding-bottom: 10px; padding-top: 10px; } #one { width: 100px; height: 100px; border: 1px solid; padding: 50px; } #two { width: 400px; height: 100px; border: 1px solid; padding: 50px; } 

 <div id="one"> <textarea placeholder="Sample Text Sample Text Sample Text Sample Text"></textarea> </div> <div id="two"> <textarea placeholder="Sample Text Sample Text Sample Text Sample Text "></textarea> </div> 

Answer 1

I've tried doing that with the textarea element and gave up. It's possible to do the same with contentEditable on a div: http://www.w3.org/TR/html5/editing.html#contenteditable

<div contenteditable="true"></div>

With height auto the div will grow with the content. You just need to catch certain keys presses with JavaScript to create the UX you want (eg enter key will on default create another element inside the editable).