如何使textarea's高度自动调整相对于占位符内容

How to make textarea's height auto adjustable with respect to the placeholder content?

本文关键字：调整 相对于 占位符 高度 textarea 何使      更新时间：2023-09-26

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

我想让占位符自动调整其高度，而不需要任何滚动。

我试了很多，但还是没能弄明白。

是否真的可以根据占位符中的文本量来调整文本区域的高度?

示例如下:

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>

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

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

如果设置height auto,div将随着内容的增长而增长。你只需要用JavaScript捕捉某些按键来创建你想要的用户体验(例如，enter键将默认在可编辑元素中创建另一个元素)。

相关文章：