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或Twitter帖子上，因为您键入而不是隐藏在文本上的文本左手边整个盒子变长了

我还附上了我目前的代码

（另外作为旁注，如何让Comment占位符移动到文本框的顶部）

提前致谢

Answer 1

我就是这样做的：

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

Here is the JSFiddle demo

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

键入时变长的文本框

2 个答案: