Text box that gets longer as you type

Question

<div class="container">
  <form action="/html/tags/html_form_tag_action.cfm" method="post">
    <div>
      <input type="text" id="text" name="text_name" class="mytext" placeholder="Comments" style="height:100px"/>
    </div>
  </form>
</div>

I want to create a text box that has a set size but as you type in the text box, the box can get longer but not any wider ie on a Facebook or twitter post, as you type instead of text getting hidden on the left hand side the whole box becomes longer

I have also attached the code I currently have

(Also as a side note, how can I get the Comment placeholder to move to the top of the text box)

Thanks in advance

You can refer to that question http://stackoverflow.com/q/4422043/1364223 — Amr M. AbdulRahman, Jul 22 '15 at 14:03
As the user [@npit](http://stackoverflow.com/users/5014635/npit) mentioned _I think you have to set a fix width and a maxheight. So the width is not changing ( and the text should break ) but the height is able to get bigger._ -- (For readers: Posted this comment on behalf of the user since he has no commenting previlege and the user deleted his answer) — Lucky, Jul 22 '15 at 14:10

Ahs N · Accepted Answer · 2015-07-22T14:34:02.333

0

This is how I would do it:

.mytext {
   word-break: break-word;
}

Here is the JSFiddle demo

edited Jul 22 '15 at 14:34

answered Jul 22 '15 at 14:14

Ahs N

8,233
1
28
33

score 0 · Answer 2 · answered Jul 22 '15 at 14:26

$('#content').on('change keyup keydown paste cut', 'textarea', function() {
  $(this).height(0).height(this.scrollHeight);
}).find('textarea').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">

  <textarea>
  </textarea>
</div>

Text box that gets longer as you type

2 Answers2