jquery - asp.net mvc textarea 与 jQuery 中换行符的字符计数

Question

我正在开发 ASP.NET MVC Web 应用程序。我在 View 中有一个文本区域，它绑定(bind)到最大长度为 1000 的模型。

//Html:
@Html.TextAreaFor(model => model.Description, 12, 50, new { @class = "form-control", @placeholder = "Mandatory" })

//Model class:
[Required]
[DisplayName("Event Description")]
[MaxLength(1000, ErrorMessage = "Maximum {1} characters.")]
public string Description { get; set; }

我还使用 jQuery 向用户显示一条消息，以便他们知道还需要输入多少个字符:

    $('#Description').keyup(function () {
        var maxlen = 1000;
        var count = $(this).val().length;
        var charLeft = maxlen - count;
        var string = charLeft + " chracters left"
        if (count > maxlen) {
            this.value = this.value.substring(0, maxlen);
        }
        else {
            $("#descriptionCharCount").text(string);
        }
    });

我发现，当输入新行时，ASP.NET 将插入 2 个空格，因此字符数增加 2。但 jQuery 只增加 1。这导致不匹配。我该如何解决这个问题？

Answer 1

为什么会发生这种情况:Windows 使用两个字符 (\r\n) 来表示换行，而某些浏览器仅使用其中一个字符 (\n )。因此，当模型绑定(bind)器将输入转换为字符串时，您实际上拥有一个使用两个字符的字符串。

有多种方法可以尝试解决这个问题，但“正确性”的程度各不相同。以下是解决该问题的一些帖子:

• http://blog.sarathonline.com/2009/09/javascript-maxlength-for-textarea-with.html
• http://kenegozi.com/blog/2010/04/19/newlines-in-textarea-are-treated-differently-on-different-browsers/
• jQuery validate textarea maxlength bug

在我看来，最正确的方法是双管齐下:

1. 以忽略 \r 字符的方式编写长度检查算法，并且
2. 使用a model binder that removes \r characters在服务器端验证之前，从发送到服务器的字符串中获取。

但是，请记住，这可能会产生一些意想不到的结果。例如，如果用户根据保存的输入下载文件，然后在记事本等程序中打开该文件(该程序仅将 \r\n 组合识别为换行符)，他们将看不到换行符。