自动调整大小的文本区域（多行 asp:TextBox）

Question

我有一个多行的asp:Textbox（对于非asp人员而言，它是一个标准的html文本框），我想通过css自动调整其大小以适应所有内容。这样做的原因是我希望在网页浏览器中指定其高度，并启用滚动。

我已经实现了打印样式表，希望在打印时显示文本区域中的所有文本，而不隐藏任何内容。

我可以在print.css文件中手动指定文本区域的高度，但问题在于该字段是可选的，350px的空白框不是最佳选择，而且总有可能出现比这更多的文本...

我尝试使用：

height: auto;
height: 100%;

在IE和Firefox中各自存在问题，但这些问题似乎会被表单HTML标记中指定的行数所覆盖。当您在asp：Textbox标记上未指定高度时，必须由.NET生成该标记，而此时只能接受数值测量，如px、em等。有什么想法吗？

- Shaun Bohannon

Answer 1

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

文本区域的内容不是HTML元素，因此无法使用CSS来计算文本区域的大小。

唯一可行的方法是使用JavaScript，例如读取scrollHeight属性并使用其设置元素的高度。但scrollHeight属性是非标准的，因此在某些浏览器中可能无法正常工作。

- Guffa

---

同时，在使用updatepanel时，JavaScript和jQuery也无法实现。 - mohsen solhnia

Answer 2

使用jQuery或JavaScript函数查找并使文本框变大可能是最好的解决方案-至少这就是我发现的。

我们使用这组函数，在页面加载后调用clean form（我知道这不是最好的解决方案，并且正在努力转换为更优雅的jQuery解决方案）-请注意确保您的文本区域具有指定的行和列，否则它无法正常工作。

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);
}

- braindice

---

谢谢，那个方法可以用，但是我需要它只使用CSS，因为我之前说过我只想影响打印媒体而不在浏览器中呈现。 - Shaun Bohannon

Answer 3

给jQuery的autogrow()函数一个尝试 @

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

- Jason Jong

Answer 4

如果你把行数设置为一个非常高的数字，CSS 高度规则应该会在屏幕上覆盖它。

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

- wheresrhys