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

Posted 2023-05-07

【中文标题】在 Chrome 和 Firefox 中使用换行符对 textarea 进行不同的 maxlength 验证

【英文标题】：Different maxlength validation of textarea with newlines in Chrome and Firefox

【发布时间】：2014-03-27 19:30:14

【问题描述】：

问题在于 Firefox 将换行符视为 "1"(\n) 字符，而 Chrome 将它们视为 "2"(\r\n) 这就是我在textarea 和maxlength=10 中得到的：

这是 10 个用于 Firefox

的字符

1234
5
6
7

这是 Chrome 的 10 个字符

1234
5
6

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

012345
678

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

我认为这个验证消息在 Chrome 中是新的，或者至少我以前没有见过它们

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

以下是 javascript 如何计算 JSFiddle length count with js 的示例。

不知道哪一个是新行的正确值（1 或 2）。但是由于数据库（在我的情况下为 Postgres）和 JavaScript 将其视为 "1" 字符，我想知道是否有办法让 Chrome 来做一样。

【问题讨论】：

Chrome counts characters wrong in textarea with maxlength attribute的可能重复

【参考方案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>