2009-04-24 51 views
3

我有一个MultiLine asp:Textbox(一个标准的html文本框,适用于那些非asp用户),我希望自动调整大小以仅通过CSS来适应所有内容。这是因为我希望它在Web浏览器中具有指定的高度,并且启用了滚动功能。Autosize文本区域(多行asp:TextBox)

但是我实现了一个打印样式表,并且希望在打印时不显示溢出的情况下显示位于textarea中的所有文本。

我可以手动指定与此是该领域是可选的,一个350像素的空白框不是最佳的,总有比这更大的文字量的可能性print.css文件问题textarea的高度

height: auto; 
height: 100%; 

在IE和Firefox分别然而这些似乎被指定的行数在HTML标记为形式,其必须存在来覆盖:...

我已经尝试使用当你没有在asp:Textbox标签上指定高度时,由.NET生成,这似乎只接受商业测量结果su ch像px em等...

任何想法?

回答

2

你所要求的(一个CSS解决方案)是不可能的。

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

唯一可以工作的是Javascript,读取scrollHeight属性并使用它来设置元素的高度。仍然scrollHeight属性是非标准的,所以它可能不适用于所有浏览器。

+0

我曾怀疑这:(:(谢谢澄清! – 2009-04-24 16:09:42

+0

...也,在使用updatepalel时不可能在JavaScript和jQuery中。 – 2015-10-06 20:20:33

1

的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); 
} 
+0

谢谢,这会工作,但我需要的是CSS只因为我说我只希望它影响到打印介质,而不是被渲染成例如在浏览器中。 – 2009-04-24 16:06:05

0

如果您将行设置为一个可笑的高数字,CSS高度规则应该在屏幕上覆盖它。

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