javascript - 如何根据占位符内容自动调整文本区域的高度？

Question

我有一个带有长占位符的文本区域字段。它在大屏幕上看起来不错。但是当我在小屏幕上打开时，占位符的某些部分会被隐藏，我必须向下滚动。

我希望占位符在没有任何滚动的情况下自动调整其高度。

我尝试了很多，但我无法弄明白。

这真的可以根据占位符中的文本量调整文本区域的高度吗？

示例在这个 jsfiddle 中和片段:

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

我试过用 textarea 元素来做，但放弃了。可以对 div 上的 contentEditable 做同样的事情: http://www.w3.org/TR/html5/editing.html#contenteditable

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

使用 height auto 时，div 将随内容增长。您只需要使用 JavaScript 捕获某些按键，即可创建您想要的用户体验(例如，默认情况下，回车键会在可编辑内容中创建另一个元素)。