如何在ASP.NET中将文本框的宽度设置为与MaxLength相同

时间:2010-06-10 22:34:24

标签: asp.net textbox width html-table maxlength

有没有办法可以将文本框的宽度限制为等于MaxLength属性?就我的情况而言,文本框控件放在表格单元格中,如下所示:

<td class=TDSmallerBold style="width:90%">
        <asp:textbox id="txtTitle" runat="server"
            CausesValidation="true"
            Text="Type a title here..be concise but descriptive. Include price."
            ToolTip="Describe the item with a short pithy title (most important keywords first). Include the price. The title you provide here will be the primary text found by search engines that index Zipeee content." 
            MaxLength="60"
            Width="100%">
        </asp:textbox>

(我知道我不应该使用HTML表格来控制布局......另一个主题是肯定的)但是有没有办法将实际宽度限制为打字框中允许的最大字符数?

6 个答案:

答案 0 :(得分:3)

这不准确,因为角色的宽度可能不同。但如果你真的认真对待这个问题,你可以用一些Javascript(jQuery)来做。步骤将是:

  • 在屏幕外创建一个范围(顶部:-1000px或其他)
  • 确保跨度与文本框具有相同的样式/类
  • 用60个字符填充范围
  • 使用jQuery测量范围的宽度
  • 将该宽度应用于文本框

这是一种类似于你在Facebook上看到的自动扩展textareas的技术:http://james.padolsey.com/javascript/jquery-plugin-autoresize/

(在这种情况下,你是水平而不是垂直。)

如果你需要真正的代码,请告诉我,我会尽我所能。

答案 1 :(得分:3)

您可以从代码(在Page_Load中调用)中设置它:

 txtTitle.Width = new Unit(txtTitle.MaxLength, UnitType.Em);

我们的系统是数据库驱动的,我们有一个元数据表,存储每个变量的长度属性。我亲自使用元数据迭代ControlCollection和每个TextBox项,拉动变量的元数据的长度,然后将其分配给MaxLength和Width,但如果你已经设置了MaxLength,你可以让它在这里做Widths方式。

答案 2 :(得分:0)

我使用HTML属性cols

因此,对于您的示例,我会使用

     <td class=TDSmallerBold style="width:90%">
    <asp:textbox id="txtTitle" runat="server"
        CausesValidation="true"
        Text="Type a title here..be concise but descriptive. Include price."
         ToolTip="Blah Blah I don't like horizotal scroll-bars" 
        MaxLength="60"
        Width="100%"
         Cols="60" 
      >
    </asp:textbox>

我从未尝试过这个,但我想知道是否有办法将两者结合在一起。所以设置MaxLength也设置为cols,这将是一个有趣的练习

答案 3 :(得分:0)

我意识到这是一个老问题,但对于那些遇到它的人来说,如何根据MaxLength属性设置文本框的样式我使用以下CSS:

input[maxlength='2'] { width: 40px;}

如果你有很多不同MaxLengths的文本框,那么这可能不适合你。但是,如果您希望文本框的显示与输入的内容相匹配,我认为这是一个很好的解决方案。

答案 4 :(得分:0)

$(':input[maxlength]').each(function (i, e) {$(e).width(e.maxLength * 10)});

这假设字符大致 10px。它非常适合我的需求。

答案 5 :(得分:0)

我意识到这是一篇非常古老的帖子 - 这是我对其他人未来参考的答案!

使用Style属性将width设置为100%而不是width属性。

e.g。

<td class=TDSmallerBold style="width:90%">
<asp:textbox id="txtTitle" runat="server"
    CausesValidation="true"
    Text="Type a title here..be concise but descriptive. Include price."
    ToolTip="Blah Blah I don't like horizontal scroll-bars" 
    MaxLength="60"
    Style="Width: 100%"
  >
</asp:textbox>

这是在我工作的生产环境中尝试和测试的。它比使用Javascript更简单,并且可以在现有HTML中使用。

至于为什么这有效,不幸的是我缺乏知识。