在Chrome和Firefox中使用换行符对textarea进行不同的maxlength验证 [英] Different maxlength validation of textarea with newlines in Chrome and Firefox

问题描述

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

这是 Firefox的

  1234 
 5 
 6 
 7 
  

Chrome浏览器的强大功能 >

b 6

尝试验证表单时出现问题。如果我有例如下面的文本：

  012345 
 678 
  

在 Firefox 中，验证通过并保存了数据，但是当我尝试在 Chrome 它显示警告，并阻止它发送表单。
请将此文字缩短为10个字符或以下（您目前使用的是11个字元）。

我认为这个验证信息在Chrome中是新的，或者至少我以前没有看到过。

这里是一个 JSFiddle示例。要在 Chrome 中重现它，您应该使用10个字符来编写一个字符串，然后删除1，然后按Enter键添加一个新行。

JavaScript的一个例子 JSFiddle长度统计与js 。

不知道哪一个是新行（1或2）的正确值。但是由于数据库（Postgres在我的情况）和JavaScript认为它是1字符，我想知道是否有方法使 Chrome 同样的。

解决方案

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

谷歌搜索一点点，我发现这个 jQuery Max Length 插件，只需添加几行即可。可以在 MIT许可下获得。并计算换行符（2个字符）

它有一些参数来设置最大长度，反馈文本，完整时的背景变化。这个网站有很好的文档和很多的例子。

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

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

 < script type =text / javascriptsrc =jquery.plugin.js>< / script> 
< script type =text / javascriptsrc =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> 
  

The problem is that Firefox counts newline as "1"(\n) character while Chrome count them as "2"(\r\n) This is what I get in a textarea with maxlength=10:

This are 10 charcters for Firefox

1234
5
6
7

This are 10 charcters for Chrome

1234
5
6

The problem comes when trying to validate the form. If I have for example the following text

012345
678

In Firefox the validation passes and the data is saved, but when I try to do the same in Chrome it shows a warning, and prevents it from sending the form. "Please shorten this text to 10 characters or less(you are currently using 11 characters)".

I think this validation messages are new in Chrome or at least I haven't see them before

Here is an JSFiddle example. To reproduce it in Chrome, you should write a string with 10 charcters then delete 1 and press enter to add a new line.

Here is an example of how JavaScript counts JSFiddle length count with js.

Don't know which one is the correct value for new line (1 or 2). But since the database (Postgres in my case) and JavaScript consider it as "1" character, I would like to know if there is a way to make Chrome to do the same.

解决方案

I didnt find any solution to make the maxlength atribute to work the same way in all browsers, and I think is because its relative new. So I decided to go for javascript.

Googling a little I found this jQuery Max Length plugin that works great just adding a few lines. Is available under the MIT licence. And counts newlines as it should be (2 characters)

It has some parameters to set the maxlength, feedback text, background change when full, between others. The website has very good documentation and a lot of examples.

It's highly customisable‎, for example here is mine

This is the only code I used plus some 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>

这篇关于在Chrome和Firefox中使用换行符对textarea进行不同的maxlength验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！