[asp.net]maxlength 属性不显示 html 呈现时?

发布时间: 2017/3/26 0:24:17
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一个文本框的文本模式设置为多行。 这样做将文本框中呈现为文本区域。 事情到这种效果︰

<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 文本不显示 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').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 却总是未定义...

解决方法 1:

MaxLength属性不是适用于 <textarea> 所以它被简单地忽略。从MSDN:

仅当文本模式属性设置为 TextBoxMode.SingleLine 或 TextBoxMode.Password,此属性才适用。

小写字母 maxlength 属性的工作原理 <textarea> ,但并不是所有的浏览器支持它所以它可能取决于,或如何 ASP.NET 将处理该属性 (它不支持它,所以它可能简单地删除该属性)。

编辑︰可以变通解决此限制一些 JavaScript 或验证控件使用此表达式︰ ValidationExpression="^[\s\S]{0,500}$" (从这里的代码)。如果你想要执行客户端验证只然后你有至少这些选项︰

1) 使用不同的名称,该属性 (如 data-maxlength ) 在您的 ASP.NET 页面和 JavaScript:

<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:Input> 控制 ASP.NET 代码中,然后您可以使用 <textarea runat="server"> 而不是正式的 ASP.NET 控件,如下例所示︰

<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>
官方微信
官方QQ群
31647020