使用Chrome和Firefox中的换行符对textarea进行不同的maxlength验证

Question

问题是Firefox将换行符设为"1"(\n)字符,而Chrome将其计为"2"(\ r \n)这是我在textarea使用的内容maxlength=10:

这是Firefox的10个字符

1234
5
6
7

这是Chrome的10个字符

1234
5
6

尝试验证表单时出现问题.如果我有例如以下文字

012345
678

在Firefox中,验证通过并保存数据,但是当我尝试在Chrome中执行相同操作时,它会显示警告,并阻止其发送表单. "请将此文本缩短为10个字符或更少(您目前使用11个字符)".

我认为此验证消息在Chrome中是新的,或者至少我以前没有看到它们

这是一个JSFiddle示例.要在Chrome中重现它,您应该编写一个包含10个字符的字符串,然后删除1并按Enter键添加新行.

以下是JavaScript如何使用js计算JSFiddle长度计数的示例.

不知道哪一个是新行(1或2)的正确值.但是由于数据库(在我的情况下是Postgres)和JavaScript认为它是"1"字符,我想知道是否有办法让Chrome做同样的事情.

Answer 1

我没有找到任何解决方案使 maxlength 属性在所有浏览器中都以相同的方式工作，我认为是因为它相对较新。所以我决定使用 javascript。

谷歌搜索一下，我发现这个jQuery Max Length插件只需添加几行就可以很好地工作。在MIT 许可下可用。并按原样计算换行符（2 个字符）

它有一些参数来设置最大长度、反馈文本、满时背景变化等等。该网站有非常好的文档和大量示例。

它是高度可定制的？，例如这是我的

这是我使用的唯一代码加上一些 css。

<script type="text/javascript" src="jquery.plugin.js"></script>
<script type="text/javascript" src="jquery.maxlength.js"></script>
<script>
    $(function() {
        $('.t_tresc').maxlength({
            showFeedback: true,
            feedbackText: '{c} / {m} max.', 
            overflowText: '{c} / {m} max!', 
            feedbackTarget: '#targetFeedback$name',
            max: $max_length,
            truncate: false,
            onFull: null
        }); 
    });
</script>