这是一个例子：
$(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，js代码也会计算字符。
所以在我的情况下，在 chrome 阻止我之前，我只能输入 7 个字符（包括空格）。尽管 maxlength 属性的值为 10：
以下是如何让您的 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。
当涉及到 maxlength 时，您的回车每个被视为 2 个字符。
1\r\n
1\r\n
1\r\n
1
但似乎 javascript 只能\r\n加起来7之一（我不确定是哪一个） 。
由于未知的原因，jQuery 总是将 a 值中的所有换行符转换<textarea>为单个字符。也就是说，如果浏览器给它\r\n一个换行符，jQuery 会确保它只是\n在.val().
<textarea>出于“maxlength”的目的，Chrome 和 Firefox 都以相同的方式计算标签的长度。
但是，HTTP 规范坚持将换行符表示为\r\n. 因此，jQuery、webkit 和 Firefox 都犯了这个错误。
结果是，<textarea>如果您的服务器端代码确实具有固定的字段值最大大小，那么标签上的“maxlength”几乎没有用。
编辑——在这一点上（2014 年末），Chrome (38) 看起来运行正常。然而，Firefox (33) 仍然不将每个硬返回计为 2 个字符。
根据上面Pointy的回答，似乎正确的方法是将所有新行都计为两个字符。这将在浏览器之间对其进行标准化，并与发布时发送的内容相匹配。
所以我们可以按照规范，用回车 - 换行对替换所有出现的回车后没有换行的回车，以及所有没有回车的换行。
var len = $('#test').val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length;
然后使用该变量来显示 textarea 值的长度，或者限制它，等等。
看起来javascript也在考虑换行符的长度。
尝试使用：
var x = $('#test').val();
x = x.replace(/(\r\n|\n|\r)/g,"");
$('#length').html(x.length);
我在你的小提琴中使用它并且它正在工作。希望这可以帮助。
Here's a more universal solution, which overrides the jQuery 'val' function. Will be making this issue into a blog post shortly and linking here.
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);
}
};
那是因为一个新行实际上是 2 个字节，因此是 2 个长。JavaScript 不这样看，因此它只会计数 1，总共 7（3 个新行）
如果要获取文本区域的剩余内容长度，则可以在包含换行符的字符串上使用 match。
HTML：
<textarea id="content" rows="5" cols="15" maxlength="250"></textarea>
JS：
var getContentWidthWithNextLine = function(){
return 250 - content.length + (content.match(/\n/g)||[]).length;
}
var value = $('#textarea').val();
var numberOfLineBreaks = (value.match(/\n/g)||[]).length;
$('#textarea').attr("maxlength",500+numberOfLineBreaks);
已经在 IE 中的 google 上完美运行必须避免脚本！在 IE 中，“断线”只计算一次，因此请避免在 IE 中使用此解决方案！
文本区域在浏览器之间仍未完全同步。我注意到两个主要问题：回车和字符编码
回车
默认情况下被操作为 2 个字符\r\n（Windows 样式）。
问题是 Chrome 和 Firefox 会将其视为一个字符。您也可以选择它来观察有一个隐身字符被选为空格。
在这里可以找到一种解决方法：
var length = $.trim($(this).val()).split(" ").join("").split('\n').join('').length;
另一方面，Internet Explorer 会将其计为 2 个字符。
他们的代表是：
二进制： 00001101 00001010
十六进制： 0D0A
, 并以 UTF-8 表示为 2 个字符，maxlength 计为 2 个字符。
HTML 实体可以是
1）从javascript代码创建：
<textarea id='txa'></textarea>
document.getElementById("txa").value = String.fromCharCode(13, 10);
2）从textarea的内容解析：
Ansi 代码：
<textarea>Line one. Line two.</textarea>
3) 从键盘输入 Enter 键
4) 定义为文本框的多行内容
<textarea>Line one.
Line two.</textarea>
字符编码
像 textarea 这样的输入字段的字符编码独立于页面的字符编码。如果您打算计算字节数，这很重要。因此，如果您有一个元标头来定义页面的 ANSI 编码（每个字符 1 个字节），则文本框的内容仍然是 UTF-8，每个字符 2 个字节。
此处提供了字符编码的解决方法：
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();
}