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：
当涉及到最大长度时，您的回车符被认为是两个字符。
1\r\n 1\r\n 1\r\n 1
但似乎只有一个（只是我不确定哪一个）加起来只有7个 。
以下是如何让您的JavaScript代码与浏览器认为在textarea中的字符数量相匹配：
$(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. 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编码丢失
