使只读文本区域高度由其内容确定答案

【问题标题】：Make readonly textarea's height determined by it's content使只读文本区域高度由其内容确定
【发布时间】：2013-03-20 20:01:43
【问题描述】：

我想让只读输入看起来像带有 CSS 的 pre 或 div 标签。

我原以为使用 textarea 会很容易，但这似乎是一项艰巨的任务。我可以隐藏边框和调整大小，但无论出于何种原因，我都无法让 textarea 的高度由其内容决定。

我已经看到很多关于使用 javascript 自动调整文本区域大小的内容，但是如果它是不需要 javascript 的静态文本，我能做些什么吗？

更新

我只是想澄清一下这样做的目的：我正在寻找编写、使用 javascript 重写并提交带有表单的单个只读元素，同时不将其限制在单个内联区域这充其量会迫使滚动，更糟的是会导致数据丢失。

更新 2

根据请求，我创建了一个小提琴来展示我正在尝试做的示例：http://jsfiddle.net/BUwdE/1/。

textarea[readonly] {
    width: 100%;
    border: 0;
    resize: none;
    overflow: hidden;
}

您会看到内容在底部被截断，因为 textarea 的高度不是由其内容决定的。

【问题讨论】：

恐怕你必须使用 Javascript。
那么，contenteditable 允许用户本质上使用像 textarea 一样的 div，但是浏览器无法找到一种方法让 textarea 看起来像 div？这对我来说没有多大意义。不是说这是不真实的，这对我来说毫无意义。
你能发布一个你想要实现的小提琴/示例代码吗？
@sgcharlie 我敢肯定不是浏览器无法弄清楚，而是HTML和Javascript之间的目的分离。为什么不想使用 Javascript？
CSS 的存在就是出于这样的原因。我不想依赖 javascript 来处理样式问题，因为毫无疑问，这会导致更多样式问题。显然，如果您考虑“contenteditable”之类的东西，浏览器能够在用户输入部分时呈现部分的高度。即使您考虑使用静态内容或通过 javascript 更新内容的常规div，浏览器也能够理解由div 的内容确定的固定高度和高度。考虑到这一点，为什么用这样的功能实现textarea 这么难？

【解决方案1】：

我实际上试图做你一直在做的事情。但由于它将是一个只读输入，我实际上最终将 CSS 应用于 div 元素。这将是一个让我们头疼的 hack。

HTML

<div class="faketextarea"> some long long text </div>

CSS

.faketextarea {
   // css of a text area 
}

【讨论】：

【解决方案2】：

您可以使用 rows 属性在 HTML 中指定文本区域的高度，但这不会自动调整大小。您可能需要求助于 W3C CSS 工作组才能得到您想要的。

<textarea name="whatWillBeSentToServer" rows="4" readonly="readonly">

【讨论】：