呈现 html 时不显示 maxlength 属性？

Question

我有一个文本模式设置为多行的文本框。这样做会将文本框呈现为文本区域。大意是这样的：

<asp:TextBox ID="txtFinBillingTerms" maxlength="500" runat="server" ToolTip="(e.g. 90/10, 30/30/30/10, etc.)" TextMode="MultiLine" Columns="5" Rows="5" Width="300px"></asp:TextBox>

我遇到的问题是，当我运行我的项目并检查呈现的 html 的 textarea 时，它没有显示 maxlength 属性，就好像它消失了：

渲染的html：

<textarea name="ctl00$MainContent$txtFinBillingTerms" rows="5" cols="5" id="MainContent_txtFinBillingTerms" title="(e.g. 90/10, 30/30/30/10, etc.)" style="width:300px;"></textarea>

这给我带来了问题，因为我试图放入一些 javascript/jquery 来限制我的 textarea 的输入，即：

$('textarea').keypress(function (e) {
            var maxLength = $(this).attr('maxlength');
            alert(maxLength);
            if (e.which < 0x20) {
                // e.which < 0x20, then it's not a printable character
                // e.which === 0 - Not a character
                return;     // Do nothing
            }
            if (this.value.length == max) {
                e.preventDefault();
            } else if (this.value.length > max) {
                // Maximum exceeded
                this.value = this.value.substring(0, max);
            }
        });

但 maxLength 始终未定义....

Answer 1

MaxLength 属性不适用于<textarea>，所以它被简单地忽略了。来自MSDN：

此属性仅在 TextMode 属性设置为 TextBoxMode.SingleLine 或 TextBoxMode.Password 时适用。

小写maxlength 属性适用于<textarea>，但并非所有浏览器都支持它，因此它可能取决于该属性或 ASP.NET 将如何处理该属性（它不支持它，因此它可能会简单地删除该属性）。

编辑：您可以使用一些 JavaScript 或带有以下表达式的验证控件来解决此限制：ValidationExpression="^[\s\S]{0,500}$"（代码来自 here）。如果您只想执行客户端验证，那么您至少有以下选项：

1) 在 ASP.NET 页面和 JavaScript 中为该属性使用不同的名称（如 data-maxlength）：

<asp:TextBox runat="server" ID="txtFinBillingTerms"
    data-maxlength="500"
    ToolTip="(e.g. 90/10, 30/30/30/10, etc.)"
    TextMode="MultiLine"
    Columns="5" Rows="5" Width="300px">
</asp:TextBox>

与：

var maxLength = $(this).data('maxlength');

2) 如果您不直接在 ASP.NET 代码中使用 <asp:Input> 控件，那么您可以使用 <textarea runat="server"> 而不是 官方 ASP.NET 控件，例如 this example ：

<textarea runat="server" ID="txtFinBillingTerms"
    maxlength="500"
    title="(e.g. 90/10, 30/30/30/10, etc.)"
    cols="5" rows="5" style="width: 300px">
</textarea>