Question

我有长占位符的textarea字段。它在大屏幕上看起来不错。但是当我在小屏幕中打开时，占位符的某些部分变得隐藏，我必须向下滚动。

我希望占位符自动调整其高度而不进行任何滚动。

我尝试了很多，但我无法理解。

这是否真的可以根据占位符中的文本数量调整textarea高度？

示例位于此jsfiddle和摘录中：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我尝试过使用textarea元素并放弃了。可以对div上的contentEditable执行相同的操作： http://www.w3.org/TR/html5/editing.html#contenteditable

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

使用高度自动，div将随内容增长。您只需要使用JavaScript捕获某些按键以创建所需的UX（例如，输入密钥将默认在可编辑内创建另一个元素）。

如何根据占位符内容使textarea的高度自动调整？

1 个答案: