自动扩展输入框和文本域

默认情况下，<input> 和 <textarea> 元素不会根据其包含的内容更改大小。 实际上，没有任何简单的 HTML 或 CSS 方法可以使它们这样做。 有点滑稽，因为这似乎是一个合理的用例。 但是当然，我的朋友，总有方法。 总有方法。

Remy Sharp 最近在 博客中 提到了这个问题，当时他谈到内联 <input> 元素。

非输入元素会自然扩展

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

我们可以使用 contenteditable 属性将任何元素设置为可编辑和类似输入框。

<span 
  class="input" 
  role="textbox" 
  contenteditable>
    99
</span>

该 <span> 会自然扩展到其包含内容所需的大小。 如果它是 <div> 或任何其他块级元素，它也会根据需要垂直扩展。

但非输入元素是否可访问？

我不确定。 请注意，我在元素上添加了 role="textbox"。 这只是根据 一些文档 作出的最佳猜测。

即使这有帮助...

1. 表单可以用 Enter 键提交怎么办？
2. 表单数据通常会被序列化并发送，而执行此操作的代码可能不会查找 span 元素。
3. 它在屏幕阅读器中实际上读取起来与输入框一样吗？
4. 输入框自然会做哪些其他事情¹ ，而我没有想到？

虽然我对能够从浏览器中免费获得自动调整大小的想法感到很兴奋，但我也对（我）未知的可用性和可访问性风险感到担忧。

调整实际输入元素的大小

因此，假设我们坚持使用 <input> 和 <textarea>。 即使这并不自然，我们能使它们可调整大小吗？

我有一个想法，就是将输入框包裹在一个相对内联的父元素中，并将其绝对定位在其中。 然后，使用 JavaScript，我们可以将输入框的值与该包装器中的隐藏 span 同步，根据需要将宽度推宽。

对于文本域，一种经典的技术是统计换行符的数量，使用该数字设置高度，然后乘以行高。 这对于预格式化的文本（如代码）非常有效，但对于长篇类似段落的文本则完全无效。

以下是我将这些想法结合在一起的结果。

其他想法

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

您的想法

我绝对知道，你们这些网络极客们已经想出了六种方法来解决这个问题。 让我们在评论区看看你们的方案。