Chrome使用maxlength属性计算textarea中的字符错误

Question

这是一个例子:

$(function() {
  $('#test').change(function() {
    $('#length').html($('#test').val().length)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id=test maxlength=10></textarea>
length = <span id=length>0</span>

用线条填充textarea(一行一个字符),直到浏览器允许.完成后,保留textarea,js代码也将计算字符.

所以在我的情况下,我可以在chrome阻止我之前只输入7个字符(包括空格).虽然maxlength属性的值是10:

Answer 1

以下是如何使您的javascript代码与浏览器认为在textarea中的字符数相匹配:

http://jsfiddle.net/FjXgA/53/

$(function () {
    $('#test').keyup(function () {
        var x = $('#test').val();

        var newLines = x.match(/(\r\n|\n|\r)/g);
        var addition = 0;
        if (newLines != null) {
            addition = newLines.length;
        }

        $('#length').html(x.length + addition);
    })
})

基本上,您只需计算文本框中的总换行符数,并为每个换行符添加1.

Answer 2

当涉及maxlength时,您的回车被认为是2个字符.

1\r\n
1\r\n
1\r\n
1

但似乎javascript只有一个\r\n(我不确定哪一个)只能加起来7.

Answer 3

由于未知原因,jQuery总是将a值中的所有换行转换<textarea>为单个字符.也就是说,如果浏览器为\r\n换行提供它,jQuery会确保它只是\n在返回值中.val().

<textarea>对于"maxlength",Chrome和Firefox都以相同的方式计算标签的长度.

但是,HTTP规范坚持将换行符表示为\r\n.因此,jQuery,webkit和Firefox都错了.

结果是,<textarea>如果您的服务器端代码确实具有固定的字段值最大大小,则标签上的"maxlength" 几乎没用.

编辑 - 此时(2014年末)看起来Chrome(38)表现正常.然而,Firefox(33)仍然不会将每个硬回车计为2个字符.

Answer 4

基于Pointy的上述答案,似乎正确的方法是将所有新行计为两个字符.这样可以跨浏览器对其进行标准化,并匹配发布时发送的内容.

因此,我们可以按照规范更换所有出现的回车符,而不是新行,并且所有新行都没有后面有回车符,带有回车 - 换行符对.

var len = $('#test').val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length;

然后使用该变量显示textarea值的长度,或限制它,依此类推.