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

有没有办法将文本框的宽度限制为MaxLength属性？在我的例子中，textbox控件放在一个表单元格中，如下代码段所示：

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

我使用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，这将是一个有趣的练习，因为字符的宽度可能会有所不同，所以它并不精确。但是如果你真的很认真，你可以用一点Javascript（jQuery）来实现。这些步骤将是：

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

这项技术类似于你在Facebook上看到的自动扩展文本区域，比如：

（在本例中，您是在水平方向而不是垂直方向进行此操作。）

---

如果您需要真正的代码，请告诉我，我会尽我最大的努力。

您可以从代码（在页面加载中调用）进行设置，如下所示：

---

我们的系统是数据库驱动的，我们有一个元数据表，存储每个变量的长度属性。我个人使用元数据的方法是迭代ControlCollection和每个文本框项，提取变量元数据的长度，然后将其分配给MaxLength和Width，但如果已经设置了MaxLength，可以让它以这种方式进行宽度设置。

我意识到这是一个老问题，但是，对于那些正在寻找如何基于MaxLength属性设置文本框样式的人，我使用了以下CSS：

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

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

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

---

这是假设字符大约是10px。它很适合我的需要

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

使用“样式”属性将“宽度”设置为100%，而不是单独使用“宽度”属性

e、 g

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

至于这到底是为什么，不幸的是，我缺乏知识

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

<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>