键入时变长的文本框

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>

我想创建一个具有固定大小的文本框，但是当您在文本框中键入内容时，文本框可能会变长但不会变宽，即在 Facebook 或推特上 post，随着您的键入而不是文本隐藏在左侧，整个框变得更长

我也附上了我目前拥有的代码

（另外作为旁注，我怎样才能让评论占位符移动到文本框的顶部）

提前致谢

Answer 1

我会这样做：

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

Here is the JSFiddle demo

Answer 2

$('#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

html

textbox