Firefox 和 IE 上的不同插入符号位置答案

【问题标题】：different caret position on firefox and IEFirefox 和 IE 上的不同插入符号位置
【发布时间】：2011-04-18 05:21:33
【问题描述】：

要重现问题，请访问http://jsfiddle.net/BsJ6V/ 并在开始正文标记后输入任意字符（例如，如果您输入 h 字符，则为<body>h）。

一个警告框将显示插入符号的位置。 在 Firefox 中运行时插入符号位置为 56，而在在 IE 中运行时插入符位置为 60。请问这是怎么回事？

编辑:: UPDATED LINK.

【问题讨论】：

我认为在 IE 中，画布被它的滚动条减去，这就是为什么你会得到 4 的差异
请查看更新后的链接jsfiddle.net/BsJ6V/1

标签： javascript cross-browser caret

【解决方案1】：

不同之处在于，IE 将文本区域中的每个换行符计为两个字符（CRLF 或 \r\n），而 Firefox 将其计为单个 LF（\n）字符。

如果有前导换行符，您的函数将无法在 IE 中获得正确的插入符号位置。要看到这一点，请将插入符号放在第一个 jsFiddle 示例中 textarea 的开头，然后按几次 return 并尝试输入其中一个空行。要解决此问题，您可以使用a function I've posted before on Stack Overflow，或者如果您更喜欢 jQuery 插件，我创建了一个用于处理文本区域选择的插件：http://code.google.com/p/rangyinputs/

更新

请注意，jQuery 的val() 方法标准化了浏览器之间换行符的差异（在我看来，这是没有帮助的，因为发送到服务器的值没有标准化），因此换行符总是\n。我的插件和您的函数都返回相对于 textarea 的原始值属性的插入符号位置，而不是 jQuery 的规范化值，因此如果您使用插入符号位置操作值，则需要使用 $textarea[0].value 而不是 $textarea.val()。

您可以在这里看到这种差异：http://jsfiddle.net/MyR7J/2/

【讨论】：