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

【问题标题】：How to set width of textbox to be same as MaxLength in ASP.NET如何在 ASP.NET 中将文本框的宽度设置为与 MaxLength 相同
【发布时间】：2011-03-02 10:24:41
【问题描述】：

有没有办法可以将文本框的宽度限制为等于 MaxLength 属性？在我现在的情况下，文本框控件被放置在一个表格单元格中，就像在这个 sn-p 中一样：

<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 表格来控制布局……肯定是另一个主题）但是有没有办法将实际宽度限制为输入框中允许的最大字符数？

【问题讨论】：

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

【解决方案1】：

您可以通过代码（在您的 Page_Load 中调用）来设置它：

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

我们的系统是数据库驱动的，我们有一个元数据表，其中存储了每个变量的长度属性。我个人通过迭代 ControlCollection 和每个 TextBox 项来使用元数据，拉取变量元数据的长度，然后将其分配给 MaxLength 和 Width，但如果您已经设置了 MaxLength，您可以让它在此执行 Widths方式。

【讨论】：

【解决方案2】：

这并不精确，因为字符的宽度可能会有所不同。但如果你真的很认真，你可以用一点 Javascript (jQuery) 来完成。步骤是：

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

这是一种类似于您在 Facebook 上看到的自动扩展文本区域的技术，例如：http://james.padolsey.com/javascript/jquery-plugin-autoresize/

（在这种情况下，你是在水平方向而不是垂直方向。）

如果您需要真正的代码，请告诉我，我会尽力而为。

【讨论】：

【解决方案3】：

我使用 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，这将是一个有趣的练习

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

我意识到这是一篇非常古老的帖子 - 这是我的答案，供其他人将来参考！

使用 Style 属性将宽度设置为 100%，而不是单独使用 width 属性。

例如

<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 中工作。

至于究竟为什么会这样，不幸的是我缺乏知识。

【讨论】：