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

问题描述

这是一个例子：



$(function() {
  $('#test').change(function() {
    $('#length').html($('#test').val().length)
  })
})
<script src="https://googleajax.admincdn.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id=test maxlength=10></textarea>
length = <span id=length>0</span>

用行 (一行一个字符) 填充文本区域，直到浏览器允许。当你完成，离开 textarea，并且 js 代码也会计算字符。

所以在我的情况下，我可以输入只有 7 个字符 (包括空格)，在 Chrome 停止我之前。虽然 maxlength 属性的值为 10：

最佳解决思路

您的回车符在 maxlength 时被认为是 2 个字符。

1rn
1rn
1rn
1

但似乎 javascript 只能是 rn 之一 (我不知道哪一个) 只加起来 7 。

次佳解决思路

以下是如何获取 JavaScript 代码以匹配浏览器认为在文本区域中的字符数量：

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

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

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

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

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

第三种解决思路

由于未知的原因，jQuery 始终将<textarea> 的所有换行符转换为单个字符。也就是说，如果浏览器为其添加了 rn，则 jQuery 确保它只是.val()的返回值中的 n 。

Chrome 和 Firefox 都以同样的方式计算<textarea> 标签的长度，用于”maxlength” 。

但是，HTTP 规范坚持认为换行符表示为 rn 。因此，jQuery，webkit 和 Firefox 都会出错。

结果是<textarea> 标签上的”maxlength” 如果您的 server-side 代码实际上具有固定的字段值的最大大小，则几乎没有用。

编辑 – 在这一点 (2014 年底)，Chrome(38) 的行为看起来正确。但 Firefox(33) 仍然不会将每个硬拷贝计算为 2 个字符。

第四种思路

根据上面的 Pointy 的回答，似乎正确的方法是将所有新行计算为两个字符。这将标准化浏览器，并匹配发布时发送的内容。

所以我们可以遵循规范，并且替换所有出现的不在后面的新行的运输回车，以及所有没有运输回车的新行，使用回车换行对。

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

然后使用该变量显示 textarea 值的长度，或限制它，等等。

第五种思路

看起来 JavaScript 正在考虑新的行字符的长度。

尝试使用：


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

x = x.replace(/(rn|n|r)/g,"");    

$('#length').html(x.length);

我用它在你的小提琴，它是工作。希望这可以帮助。

参考文献

Chrome counts characters wrong in textarea with maxlength attribute

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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