如何在asp.net c#中移除asp:TextBox的cols和rows属性？

Question

我页面上有一个asp:TextBox控件。我将其设置为TextMode="MultiLine"，没有设置行数或列数。我在CSS中为控件设置了宽度和高度。

然而，asp.net仍会在渲染的控件上添加默认的rows和cols属性。cols="20"和rows="2"。这在任何正常的浏览器中都不是问题，但在IE浏览器中，CSS高度被忽略，只显示两行空间。

我该如何防止这些属性出现在渲染的控件上？

编辑：此问题仅在IE8兼容模式下出现，在IE7和IE6中没有问题。我不担心IE6，但必须确保IE7能够正常工作。

- Justin808

Answer 1

不要使用asp:Textbox，而是使用<textarea />并在其中添加runat="server"，如果未进行设置，则不会添加cols和rows属性。

<textarea id="txtContent" runat="server"></textarea>

- Jimmy Mattsson

Answer 2

外部 CSS（不要混合使用内联和外部 CSS）：

.myTextBox
{
    height: 40px; 
    width: 220px;
}

<asp:TextBox ID="TextBox1" CssClass="myTextBox" runat="server"></asp:TextBox>

请注意，高度为100％将为您提供默认的单行高度 - 基本上没有效果。如果您想要多行，请在CSS中使用像素。

生成的标记：

<input name="TextBox1" type="text" id="TextBox1" class="myTextBox" />

CSS 的高度设置可以很好地实现双行效果。

在这里，最好的方法是以其最基本的形式进行测试，然后逐步增强不同的浏览器。

更新

ASP.NET 使用 CSS 值而不是设置等效的行和列。但是，在 FF 3.6 和 IE8（兼容模式）中仍然可以正常工作。要抑制这些属性，我认为您可能需要创建一个自定义控件来继承 TextBox 并调整呈现方法。不确定，但您也可以尝试使用 JS 删除这些属性。

多行文本框实际上是一个 HTML 的 <textarea> 标签：

http://www.w3schools.com/TAGS/tag_textarea.asp

.myTextBox
{
    height: 100px; 
    width: 220px;
}

在IE8兼容模式下呈现的HTML：

<textarea name="TextBox1" rows="2" cols="20" id="TextBox1" class="myTextBox">

我可以确认在IE8兼容模式下，多行功能是正确的。

在Firefox中呈现的HTML：

<textarea name="TextBox1" rows="2" cols="20" id="TextBox1" class="myTextBox">

有趣的是，在VS 2010的属性窗口中，行和列都设置为“0”，但仍然出现在标记中，分别设置为“2”和“20”！这些链接可能会对您有所帮助：

http://dotnet.itags.org/webcontrols/95106/

http://forums.asp.net/t/944368.aspx?Removing+Attributes+on+Rendering+WebControl链接文本

注意：如果您的文档类型为XHTML 1.0 Transitional，则textarea的rows和cols属性是必需的。因此，您可能会发现，在创建自定义控件以消除这些属性的所有麻烦之后，包含页面将无法验证。

- IrishChieftain

---

在ASP控件上需要设置TextMode="Multiline"，这样结果就是一个文本区域而不是输入框。在输入框上设置宽度和高度只会让其变成右侧，但仍然只能输入单行内容。 - Justin808

由于某种奇怪的原因，这些是必需的属性。更奇怪的是，只有IE6和IE7关心它们是否必需。为了解决我的问题，我将行数设置得尽可能接近高度。在旧版浏览器中看起来有点不协调，但现代浏览器都会忽略这些属性。 - Justin808

我将行和列保留在默认设置（2＆20），并将CSS高度设置为300px，在IE8兼容模式下运行良好。如果您省略它们，则页面可能无法验证，因此最好保留默认值并使用CSS将其样式化为所需的方式 :-) - IrishChieftain

Answer 3

如果您正在使用 TextBox 的 Height 和 Width，则它可以正常工作。您试过了吗？

编辑

当您使用 Width、Height 时，控件会将这些细节推送为样式中的 Height 和 Width。据我所知，TextBox 不直接支持 Style 属性。

<textarea name="ctl00$MainContent$TextBox1" id="MainContent_TextBox1" style="width: 200px; height: 300px; font-family: Courier New; font-size: larger;" rows="2" cols="20"/>

当您忽略设置高度和宽度时，它只是不会将宽度和高度添加到您的控件中。正如您所看到的，rows="2" cols="20" 保持不变。

<textarea name="ctl00$MainContent$TextBox1" id="MainContent_TextBox1" style="font-family: Courier New; font-size: larger;" rows="2" cols="20"/>

- Rahul Soni

---

这只是在IE8兼容模式下的问题，IE7和IE6也有此问题。我不担心IE6，但需要确保IE7能正常工作。 - Justin808

Rahul，问题在于rows="2"和cols="20"始终存在。如果我有一个样式width:和height:，则会忽略height并使用rows="2"。这使得我的高度为100%被忽略，文本区域只有2行高。 - Justin808