如何从一开始就以字符方式在textarea中获得插入符号的位置？

如何使用JavaScript在<textarea>获得插入符的位置？

例如： This is| a text This is| a text

这应该返回7 。

你将如何得到它返回光标/select周围的string？

例如： 'This is', '', ' a text' 。

如果单词“is”被突出显示，那么将返回'This ', 'is', ' a text' 。

Answer 1

使用Firefox，Safari（以及其他基于Gecko的浏览器），您可以轻松使用textarea.selectionStart，但对于不起作用的IE，您将不得不这样做：

 function getCaret(node) { if (node.selectionStart) { return node.selectionStart; } else if (!document.selection) { return 0; } var c = "\001", sel = document.selection.createRange(), dul = sel.duplicate(), len = 0; dul.moveToElementText(node); sel.text = c; len = dul.text.indexOf(c); sel.moveStart('character',-1); sel.text = ""; return len; } 

（ 完整的代码在这里 ）

我也build议你检查jQuery的FieldSelection插件，它可以让你做到这一点，更…

编辑：我其实重新执行上面的代码：

 function getCaret(el) { if (el.selectionStart) { return el.selectionStart; } else if (document.selection) { el.focus(); var r = document.selection.createRange(); if (r == null) { return 0; } var re = el.createTextRange(), rc = re.duplicate(); re.moveToBookmark(r.getBookmark()); rc.setEndPoint('EndToStart', re); return rc.text.length; } return 0; } 

在这里检查一个例子。

Answer 2

2010年9月5日更新

看到每个人似乎都在这里指导这个问题，我把我的答案join到一个类似的问题，其中包含与这个答案相同的代码，但对于那些有兴趣的人有完整的背景：

IE的document.selection.createRange不包括前导或结尾的空白行

为了说明拖尾换行符在IE中是非常棘手的，我还没有看到任何解决scheme能够正确执行，包括对此问题的任何其他答案。 但是，可以使用以下函数，它将在<textarea>或text <input>内返回select的开始和结束（与插入符号相同）。

请注意，textarea必须具有此function的焦点才能在IE中正常工作。 如果有疑问，请先调用textarea的focus()方法。

 function getInputSelection(el) { var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange; if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { start = el.selectionStart; end = el.selectionEnd; } else { range = document.selection.createRange(); if (range && range.parentElement() == el) { len = el.value.length; normalizedValue = el.value.replace(/\r\n/g, "\n"); // Create a working TextRange that lives only in the input textInputRange = el.createTextRange(); textInputRange.moveToBookmark(range.getBookmark()); // Check if the start and end of the selection are at the very end // of the input, since moveStart/moveEnd doesn't return what we want // in those cases endRange = el.createTextRange(); endRange.collapse(false); if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { start = end = len; } else { start = -textInputRange.moveStart("character", -len); start += normalizedValue.slice(0, start).split("\n").length - 1; if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { end = len; } else { end = -textInputRange.moveEnd("character", -len); end += normalizedValue.slice(0, end).split("\n").length - 1; } } } } return { start: start, end: end }; } 

Answer 3

我修改了上面的函数来说明IE中的回车。 这是未经testing，但我做了类似的代码，所以它应该是可行的。

 function getCaret(el) { if (el.selectionStart) { return el.selectionStart; } else if (document.selection) { el.focus(); var r = document.selection.createRange(); if (r == null) { return 0; } var re = el.createTextRange(), rc = re.duplicate(); re.moveToBookmark(r.getBookmark()); rc.setEndPoint('EndToStart', re); var add_newlines = 0; for (var i=0; i<rc.text.length; i++) { if (rc.text.substr(i, 2) == '\r\n') { add_newlines += 2; i++; } } //return rc.text.length + add_newlines; //We need to substract the no. of lines return rc.text.length - add_newlines; } return 0; } 

Answer 4

如果您不必支持IE，则可以使用textarea selectionStart和selectionEnd属性。

要获取插入位置只需使用selectionStart ：

 function getCaretPosition(textarea) { return textarea.selectionStart } 

要获得select周围的string，请使用以下代码：

 function getSurroundingSelection(textarea) { return [textarea.value.substring(0, textarea.selectionStart) ,textarea.value.substring(textarea.selectionStart, textarea.selectionEnd) ,textarea.value.substring(textarea.selectionEnd, textarea.value.length)] } 

在JSFiddle上演示 。

另请参阅HTMLTextAreaElement文档 。