Question

我有一个MultiLine asp：Textbox（那些非asp人的标准html textarea），我希望自动调整大小，以便只通过css来填充所有内容。原因是我希望它在Web浏览器中具有指定高度，并启用滚动。

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

我可以在print.css文件中手动指定textarea的高度问题，因为这些字段是可选的，并且350px的空白框不是最佳的，并且总是存在比这更大的文本量的可能性。 ..

我尝试过使用：

height: auto;
height: 100%;

分别在IE和Firefox中，这些似乎被表格的html标记中存在指定数量的行所覆盖，当你没有在asp上指定高度时必须由.NET生成：文本框标签，这似乎只接受诸如px em等的商业测量......

有什么想法吗？

Answer 1

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

textarea的内容不是html元素，因此css不能用它来计算textarea的大小。

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

Answer 2

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

我们使用这组函数并在页面加载后调用clean表单（我知道这不是最好的解决方案，我正在努力转移到更优雅的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);
}

Answer 3

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

然后在打印样式表中将高度设置为auto。这可能会导致一些空白空间无法填满所有可用行，但至少所有文本都可见。

Answer 4

给jQuery的autogrow（）一个go @

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

自动调整文本区域（多行asp：TextBox）

4 个答案: