Auto-Growing Inputs & Textareas

By default,<input> and <textarea></textarea> 元素不会根据其内容大小自动调整尺寸。事实上，并没有简单易用的HTML 或CSS 方法能够实现此功能。这有点奇怪，因为这似乎是一个合理的用例。但当然，总有办法，我的朋友。总有办法。

我最近在思考这个问题，起因是Remy Sharp 在其博客中讨论了内联<input> 元素的这个问题。

非输入元素自然扩展

对我来说，奇怪的是没有办法强制<input> 元素模仿这种行为，但事实就是这样。

我们可以使用contenteditable 属性将任何元素设为可编辑的、类似输入的元素：

<span contenteditable="true" role="textbox">99</span>

该<span></span> 元素会自然地扩展到其内容所需宽度。如果它是一个<div> 或任何其他块级元素，它也会根据需要垂直扩展。 <h3 id="但是-非输入元素是否具有可访问性">但是，非输入元素是否具有可访问性？</h3> <p>我不太确定。请注意，我在元素上设置了<code>role="textbox"。这只是根据一些文档做出的最佳猜测。

即使这有帮助……

1. 回车键提交表单的情况如何？
2. 表单数据经常被序列化并发送，而执行此操作的代码可能不会查找<span></span> 元素，这种情况如何？
3. 它在屏幕阅读器中的读取方式是否真的与<input> 元素相同？
4. <input> 元素还有哪些¹ 我没有想到的自然行为？

虽然我很喜欢通过使用非输入元素从浏览器免费获得自动调整大小的想法，但我同时也担心（我）未知的可用性和可访问性风险。

调整实际输入元素的大小

因此，假设我们坚持使用<input> 和<textarea></textarea>。即使它不是特别自然，我们能否使它们可调整大小？

我想到的一个想法是用一个相对内联的父元素包装输入元素，并将其绝对定位在父元素内部。然后，使用JavaScript，我们可以将输入值与包装器内的隐藏<span></span> 元素同步，根据需要将宽度扩展。

对于<textarea></textarea> 元素，一种经典技术是计算换行符的数量，用它来设置高度，然后乘以行高。这对于预格式化的文本（如代码）非常有效，但对于长篇幅的段落式内容则完全无效。

以下是所有这些想法的组合。

其他想法

Shaw 有一个非常巧妙的JavaScript 单行代码。JavaScript 在元素上设置一个data-* 属性，该属性等于输入的值。输入元素设置在一个CSS 网格中，该网格是一个伪元素，它使用该data-* 属性作为其内容。该内容是根据输入值将网格拉伸到适当大小的内容。

你的想法

我绝对知道你们这些网络极客已经用六种方法解决了这个问题。让我们在评论中看看它们。

1. Eric Bailey 给了我一些即兴的想法：（1）没有可访问的名称。（2）它可能不适用于语音控制。（3）它将在高对比度模式下被忽略。