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

这里是一个例子:

$(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代码也会计算字符。

所以在我的情况下,我可以input只有7个字符(包括空格)之前铬停止我。 尽pipemaxlength属性的值是10:

imgur

当涉及到最大长度时,您的回车符被认为是两个字符。

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

但似乎只有一个(只是我不确定哪一个)加起来只有7个

以下是如何让您的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。

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

Chrome和Firefox都以“maxlength”为目的来计算<textarea>标签的长度。

但是,HTTP规范坚持认为换行符表示为\r\n 。 因此,jQuery,Webkit和Firefox都会出错。

结果是<textarea>标签上的“maxlength”几乎没有用,如果你的服务器端代码真的有一个固定的字段值的最大值。

编辑 – 在这一点上(2014年底),看起来像铬(38)行为正确。 然而,Firefox(33)仍然不会将每个硬回归计为2个字符。

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

因此,我们可以按照规范进行更换,而不是换行后面的所有换行,以及所有换行后没有换行的换行,换行符 – 换行符。

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

然后使用该variables显示textarea值的长度,或限制它,等等。

看来javascript也在考虑新行字符的长度。

尝试使用:

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

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

那是因为一个新行实际上是2个字节,因此2个长。 JavaScript没有这样看,所以它只会计算1,总共7(3个新行)

这是一个更通用的解决scheme,它覆盖了jQuery的'val'函数。 将这个问题变成一个博客文章不久,并在这里链接。

 var originalVal = $.fn.val; $.fn.val = function (value) { if (typeof value == 'undefined') { // Getter if ($(this).is("textarea")) { return originalVal.call(this) .replace(/\r\n/g, '\n') // reduce all \r\n to \n .replace(/\r/g, '\n') // reduce all \r to \n (we shouldn't really need this line. this is for paranoia!) .replace(/\n/g, '\r\n'); // expand all \n to \r\n // this two-step approach allows us to not accidentally catch a perfect \r\n // and turn it into a \r\r\n, which wouldn't help anything. } return originalVal.call(this); } else { // Setter return originalVal.call(this, value); } }; 
 var value = $('#textarea').val(); var numberOfLineBreaks = (value.match(/\n/g)||[]).length; $('#textarea').attr("maxlength",500+numberOfLineBreaks); 

在IE上完美的工作已经在IE中避免脚本! 在IE中,“折线”只计算一次,所以在IE中避免这个解决scheme!

如果您想获取文本区域的剩余内容长度,则可以在包含换行符的string上使用匹配。

HTML:

 <textarea id="content" rows="5" cols="15" maxlength="250"></textarea> 

JS:

 var getContentWidthWithNextLine = function(){ return 250 - content.length + (content.match(/\n/g)||[]).length; } 

Textareas在浏览器中仍然没有完全同步。 我注意到两个主要问题:回车和字符编码

回车

默认情况下被操作为2个字符\ r \ n (Windows风格)。

问题在于Chrome和Firefox会将其统计为一个字符。 你也可以select它来观察有一个被选作空间的隐藏字符。

解决方法在这里find:

 var length = $.trim($(this).val()).split(" ").join("").split('\n').join('').length; 

当用户types换行符时,jquery字数将被计算

另一方面,Internet Explorer会将其计为2个字符。

他们的代表是:

二进制: 00001101 00001010

hex: 0D0A

,用UTF-8表示为2个字符,最大长度为2个字符。

HTML实体可以

1)从JavaScript代码创build:

 <textarea id='txa'></textarea> document.getElementById("txa").value = String.fromCharCode(13, 10); 

2)从textarea的内容parsing:

Ansi代码: &#13;&#10;

 <textarea>Line one.&#13;&#10;Line two.</textarea> 

3)从键盘inputEnter键

4)定义为文本框的多行内容

 <textarea>Line one. Line two.</textarea> 

字符编码

像textarea这样的input字段的字符编码是独立于页面的字符编码的。 如果您打算计算字节数,这一点很重要。 所以,如果你有一个元头来定义页面的ANSI编码(每个字符1个字节),那么你的文本框的内容仍然是每个字符2个字节的UTF-8。

这里提供了字符编码的解决方法:

 function htmlEncode(value){ // Create a in-memory div, set its inner text (which jQuery automatically encodes) // Then grab the encoded contents back out. The div never exists on the page. return $('<div/>').text(value).html(); } function htmlDecode(value){ return $('<div/>').html(value).text(); } 

从input字段读取属性时,HTML编码丢失