多行<asp:textbox>的MaxLength属性失效，如何用jQuery控制其最大长度

确实，当你把<asp:TextBox>设置为TextMode="MultiLine"时，它会被渲染成HTML的<textarea>元素，而原生<textarea>早年完全不支持maxlength属性，即使现在部分浏览器支持，ASP.NET的服务器端属性也没法正确传递生效。所以我们得用jQuery手动控制输入长度，下面是几个实用的方案：

基础方案：针对单个TextBox #

先写出你的ASP.NET控件代码：

<asp:TextBox ID="txtMultiLine" runat="server" TextMode="MultiLine" Rows="5" Columns="50"></asp:TextBox>

然后添加jQuery代码，处理输入截断和长度限制：

$(document).ready(function() {
    // 定义最大允许长度
    const maxInputLength = 100;
    // 获取渲染后的textarea元素（用ASP.NET的ClientID确保正确选中）
    const $multiLineTxt = $('#<%= txtMultiLine.ClientID %>');

    // 监听input事件——覆盖所有输入场景：手动输入、粘贴、拖拽文本等
    $multiLineTxt.on('input', function() {
        // 统一处理换行符：把\r\n替换成\n，避免不同浏览器计数不一致（有的算2个字符，有的算1个）
        const currentContent = $(this).val().replace(/\r\n/g, '\n');
        
        if (currentContent.length > maxInputLength) {
            // 截断到最大长度
            const truncatedContent = currentContent.substring(0, maxInputLength);
            $(this).val(truncatedContent);
            // 可选：给用户友好提示，建议用页面内标签代替alert
            alert('输入内容已达到最大长度限制！');
        }
    });

    // 可选：监听keydown事件，提前阻止无效输入（提升用户体验）
    $multiLineTxt.on('keydown', function(e) {
        const currentContent = $(this).val().replace(/\r\n/g, '\n');
        // 允许退格、删除、Ctrl/Command组合键（比如全选、复制粘贴）
        const allowedKeys = [8, 46];
        const isModifierKey = e.ctrlKey || e.metaKey;
        
        if (currentContent.length >= maxInputLength && !allowedKeys.includes(e.keyCode) && !isModifierKey) {
            e.preventDefault();
            alert('已达到最大输入长度，无法继续输入！');
        }
    });
});

进阶方案：批量处理多个多行TextBox #

如果你有多个多行TextBox需要控制，可以用自定义属性配置每个控件的最大长度，更灵活：

ASP.NET控件代码（添加data-maxlength自定义属性）：

<asp:TextBox ID="txtDesc" runat="server" TextMode="MultiLine" Rows="3" Columns="40" data-maxlength="150"></asp:TextBox>
<asp:TextBox ID="txtNotes" runat="server" TextMode="MultiLine" Rows="4" Columns="40" data-maxlength="200"></asp:TextBox>

对应的jQuery代码：

$(document).ready(function() {
    // 选择所有带有data-maxlength属性的多行TextBox（渲染后是textarea，也可以用类选择器）
    $('textarea[data-maxlength]').each(function() {
        const $this = $(this);
        // 读取自定义属性的最大长度值
        const maxLength = parseInt($this.data('maxlength'));
        
        // 确保数值有效
        if (isNaN(maxLength)) return;

        // 输入处理逻辑
        $this.on('input', function() {
            const content = $this.val().replace(/\r\n/g, '\n');
            if (content.length > maxLength) {
                $this.val(content.substring(0, maxLength));
                // 在控件旁边显示实时长度提示
                $this.next('.length-hint').text(`已输入 ${maxLength}/${maxLength} 字符`);
            } else {
                $this.next('.length-hint').text(`已输入 ${content.length}/${maxLength} 字符`);
            }
        });

        // 按键阻止逻辑
        $this.on('keydown', function(e) {
            const content = $this.val().replace(/\r\n/g, '\n');
            const allowedKeys = [8, 46];
            const isModifierKey = e.ctrlKey || e.metaKey;
            
            if (content.length >= maxLength && !allowedKeys.includes(e.keyCode) && !isModifierKey) {
                e.preventDefault();
            }
        });
    });
});

别忘了在每个TextBox后面加提示元素：

<span class="length-hint">已输入 0/150 字符</span>

重要提醒：服务器端验证 #

前端限制很容易被绕过（比如用户通过浏览器控制台修改代码），所以一定要在服务器端也做长度验证，确保数据安全：

protected void btnSave_Click(object sender, EventArgs e)
{
    // 对应txtDesc的最大长度150
    const int descMaxLength = 150;
    string descContent = txtDesc.Text.Replace("\r\n", "\n");
    
    if (descContent.Length > descMaxLength)
    {
        lblErrorMessage.Text = "描述内容不能超过150字符！";
        return;
    }

    // 后续保存逻辑...
}

这样就能完整解决多行TextBox的最大长度限制问题啦！

内容的提问来源于stack exchange，提问作者Alavi