如何用CSS3自动增长文本区域？

Question

鉴于textarea以小盒子,单行开头,是否可以使用CSS3自动增长为多行,因为用户键入多行直到设置限制(300px),当滚动条出现溢出自动时所有的输入？

Answer 1

2020 年更新 - 使用 contenteditable

因为这个答案仍然不时帮助一些人，所以我想用 Chris Coiyer 的最新发现来更新我的答案。

请注意，它仍然不是 CSS3 解决方案。但它内置在浏览器中，并重新创建了 OP 寻求的行为。

contenteditable在 a 上使用HTML 属性<div />将允许用户编辑 a 的文本内容div并在用户换行时展开。然后，只需将您伪装div成<textarea />.

<div 
  class="expandable-textarea"
  role="textbox"
  contenteditable
>
    Your default value
</div>

.expandable-textarea {
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: inherit;
  padding: 1px 6px;

  display: block;
  width: 100%;
  overflow: hidden;
  resize: both;
  min-height: 40px;
  line-height: 20px;
}

这个解决方案的一个警告是我们没有使用 textareas。请记住，某些功能（例如占位符）需要一些创造力才能使用<div contenteditable />

资料来源： The Great Chris Coiyer。链接到他的博客

原始答案：使用轻量级 JS 库的解决方法

不幸的是，似乎仅使用 CSS3 无法做到这一点。

但是，有一个 3.2k 缩小的 JS 替代方案。

这是包括演示和用法的链接。

您可以通过这样做npm install autosize和使用这种方式来安装它

autosize(document.querySelector('.yourTextAreaClass'));

或者 jQuery 风格

autosize($('.yourTextAreaClass'));

它就像一个魅力。与许多做无用动画的自动调整大小不同，它轻巧且具有自然的感觉。

Answer 2

Chris Coyier（CodePen 名人）刚刚发布了一个基于网格的 CSS-only 实现。来自Chris Coyier 的原始 CodePen - 2020 年 10 月 30 日

.grow-wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}

.grow-wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";
  /* This is how textarea text behaves */
  white-space: pre-wrap;
  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}

.grow-wrap>textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
  resize: none;
  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}

.grow-wrap>textarea,
.grow-wrap::after {
  /* Identical styling required!! */
  border: 1px solid black;
  padding: 0.5rem;
  font: inherit;
  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}

body {
  margin: 2rem;
  font: 1rem/1.4 system-ui, sans-serif;
}

label {
  display: block;
}

<form action="#0">
  <label for="text">Text:</label>
  <div class="grow-wrap">
    <textarea name="text" id="text" onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>
  </div>
</form>

执照：

版权所有 (c) 2020 by Chris Coyier ( https://codepen.io/chriscoyier/pen/XWKEVly )

特此授予任何人免费获得本软件和相关文档文件（“软件”）副本的许可，不受限制地处理本软件，包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可和/或销售本软件的副本，并允许向其提供本软件的人员这样做，但须符合以下条件：

上述版权声明和本许可声明应包含在软件的所有副本或重要部分中。

本软件按“原样”提供，不提供任何形式的明示或暗示的保证，包括但不限于适销性、特定用途的适用性和不侵权的保证。在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任承担任何责任，无论是在合同诉讼、侵权行为或其他方面，由软件或软件的使用或使用或其他原因引起的或与之相关的软件。