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

Question

我正在开发 ASP.NET MVC Web 应用程序。我在视图中有一个文本区域，它绑定到最大长度为 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)。因此，当模型绑定器将输入转换为字符串时，您实际上拥有一个使用两个字符的字符串。

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

• http://blog.sarathonline.com/2009/09/javascript-maxlength-for-textarea-with.html
• http://kenegozi.com/blog/2010/04/19/newlines-in-textarea-are-treatment- Differently-on- Different-browsers/
• jQuery 验证文本区域最大长度错误

在我看来，最正确的做法是从两方面入手：

1. 以忽略字符的方式编写长度检查算法\r，并且
2. 在服务器端验证之前，使用模型绑定器从发送到服务器的字符串中删除\r字符。

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