自动调整文本区域（多行 asp:TextBox）答案

【问题标题】：Autosize Text Area (Multiline asp:TextBox)自动调整文本区域（多行 asp:TextBox）
【发布时间】：2010-10-21 15:31:13
【问题描述】：

我有一个 MultiLine asp:Textbox（一个标准的 html 文本区域，适用于那些非 asp 的人），我想通过 css 自动调整大小以适应它的所有内容。这样做的原因是我希望它在网络浏览器中具有指定的高度，并启用滚动。

然而，我已经实现了一个打印样式表，并且希望在打印时显示位于 textarea 中的所有文本，并且不隐藏溢出。

我可以在 print.css 文件中手动指定 textarea 的高度，因为这些字段是可选的，并且 350px 的空白框不是最佳选择，而且总有可能出现比这更多的文本。 ..

我尝试过使用：

height: auto;
height: 100%;

分别在 IE 和 Firefox 中，但当您未在 asp 上指定高度时，这些似乎被 html 标记中必须由 .NET 生成的表单的指定行数覆盖：文本框标签，这似乎只接受 px em 等数值测量...

有什么想法吗？

【问题讨论】：

标签： asp.net html css

【解决方案1】：

您所要求的（css 解决方案）是不可能的。

textarea的内容不是html元素，所以不能被css用来计算textarea的大小。

唯一可行的就是 Javascript，例如读取scrollHeight 属性并使用它来设置元素的高度。 scrollHeight 属性仍然是非标准的，因此它可能不适用于所有浏览器。

【讨论】：

...同样，在使用 updatepalel 时，在 javascript 和 jquery 中是不可能的。

【解决方案2】：

jQuery 或 javascript 函数来查找和扩大文本框可能是最好的解决方案 - 至少我发现的就是这样

我们使用这组函数并在页面加载后调用干净的表单（我知道这不是最好的解决方案，并且正在努力转移到更优雅的 jQuery 解决方案） - 请注意确保您的 textareas 有指定行和列，否则无法正常工作。

function countLines(strtocount, cols)
{ 
    var hard_lines = 1; 
    var last = 0; 
    while (true) 
    { 
        last = strtocount.indexOf("\n", last + 1); 
        hard_lines++; 
        if (last == -1) break; 
    } 
    var soft_lines = Math.round(strtocount.length / (cols - 1)); 
    var hard = eval("hard_lines  " + unescape("%3e") + "soft_lines;"); 
    if (hard) soft_lines = hard_lines; return soft_lines; 
}

function cleanForm() 
{
    var the_form = document.forms[0];
    for (var i = 0, il = the_form.length; i < il; i++)
    { 
        if (!the_form[i]) continue; 
        if (typeof the_form[i].rows != "number") continue;
        the_form[i].rows = countLines(the_form[i].value, the_form[i].cols) + 1; 
    }    
    setTimeout("cleanForm();", 3000);
}

【讨论】：

谢谢，这会起作用，但我只需要它是 CSS，因为我说过我只希望它影响打印媒体而不是在浏览器中呈现。

【解决方案3】：

如果您将行数设置为高得离谱的数字，则 CSS 高度规则应在屏幕上覆盖它。

然后在打印样式表中将高度设置为自动。这可能会导致一些大的空白区域，其中所有可用行都没有被填满，但至少所有文本都是可见的。

【讨论】：

【解决方案4】：

试试 jQuery 的 autogrow() @

http://plugins.jquery.com/project/autogrow

【讨论】：