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

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

例如: This is| a text This is| a text

这应该返回7

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

例如: 'This is', '', ' a text'

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

    使用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; } 

    在这里检查一个例子。

    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 }; } 

    我修改了上面的函数来说明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; } 

    如果您不必支持IE,则可以使用textarea selectionStartselectionEnd属性。

    要获取插入位置只需使用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文档 。