获取文本框中字符总数（包括换行符）

Question

我在Chrome中测试了这段代码，似乎存在与换行符有关的错误。在实际使用所有字符之前，我已经达到了maxlength。

var ta = document.getElementById('myText');

document.getElementById('max').innerHTML = ta.maxLength;

setInterval(function() {
    document.getElementById('count').innerHTML = ta.value.length;
}, 250);

<textarea id="myText" maxlength="200" style="width:70%;height:130px">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Type more words here...
</textarea>

<div>
    Char Count <span id="count">0</span>/<span id="max">0</span>
</div>

我该如何准确地获取文本区域的字符数？

更新1 我向Chromium团队报告了错误，但这似乎是低优先级。

更新2 该错误已合并到另一个错误中。

更新3 该错误似乎已经修复！

- styfle

---

自己编写“maxlength”属性，而不是使用浏览器的。 - Waleed Khan

所以你想要计算换行符吗？而且不要使用 setInterval 进行轮询，应该根据需要使用 keyup 或 keypress。 - RobG

Answer 1

似乎是一个 WebKit 的 bug（考虑报告它），与将 CR/LF 对待为两个字符而不是一个有关。由于通常情况下，如果允许使用 197 个字符而不是 200 个字符，则通常不会出现重大问题，因此可以忽略此问题。

但是，如果您想要，您可以尝试在用户输入时连续保存插入符位置，将所有的\r\n替换为\n，并在文本区域中恢复插入符位置。

- Marat Tanalin

---

我在Mac OS上的Chrome或Safari中没有看到那个“bug”，我得到的结果与Firefox完全相同。某些文字处理器存在差异，它们不会将新行或换行符视为字符，这可能是由于它们对世界的不同看法所致。另一方面，IE插入一个换行和回车符，因此将新行计为两个字符，并且已经这样做了很长时间。 - RobG

@RobG：与 Windows 不同（其中换行由 2 个字符组成：CR+LF，\r\n），Mac OS 上的换行只由一个字符（回车符，CR，\r）组成，因此 \r 和 \n 的长度相同 - 都是 1，可以合理地预期该问题在 Mac OS 上不会重现。IE6 在这里无关紧要，因为对 HTML5 验证的支持仅在 IE10 中添加（顺便说一下，它的工作方式是正确的，不像 Chrome）。 - Marat Tanalin

听起来文本区需要标准化。这不应该受操作系统的影响。为什么Unix用户可以输入比Windows用户更多的字符？更何况maxlength应该使用文本区报告的字符数。 - styfle

我将此标记为正确答案，但我认为这不是Webkit的错误，因为Windows上的Safari没有相同的问题。 - styfle

本质上，这个问题是一个浏览器的 bug。如果这不是一个 WebKit 的 bug，那么这就是一个 Chromium 的 bug。（笑） - Marat Tanalin