如何从一开始就获得文本区域中插入符号列(而不是像素)的位置(以字符为单位)？

Question

如何从一开始就获得文本区域中插入符号列(而不是像素)的位置(以字符为单位)？

控件中的插入符号位置是如何得到的。<textarea>使用JavaScript？

例如：This is| a text

这应该会回来7.

如何让它返回围绕游标/选择的字符串？

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

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

Answer 1

对于Firefox、Safari(和其他基于壁虎的浏览器)，您可以很容易地使用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;}(这里完整的代码)我还建议您检查jQuery。字段选择插件，它允许你这样做，还有更多.编辑：实际上，我重新实现了上述代码：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

我修改了上面的函数，以考虑IE中的回车情况。它没有经过测试，但是我在代码中做了一些类似的事情，所以它应该是可行的。function&nbsp;getCaret(el)&nbsp;{ &nbsp;&nbsp;if&nbsp;(el.selectionStart)&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;el.selectionStart;&nbsp; &nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(document.selection)&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;el.focus();&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;r&nbsp;=&nbsp;document.selection.createRange();&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(r&nbsp;==&nbsp;null)&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;0;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;re&nbsp;=&nbsp;el.createTextRange(),&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;rc&nbsp;=&nbsp;re.duplicate();&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;re.moveToBookmark(r.getBookmark());&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;rc.setEndPoint('EndToStart',&nbsp;re);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;add_newlines&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i=0;&nbsp;i<rc.text.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(rc.text.substr(i,&nbsp;2)&nbsp;==&nbsp;'\r\n')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;add_newlines&nbsp;+=&nbsp;2; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i++; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//return&nbsp;rc.text.length&nbsp;+&nbsp;add_newlines; &nbsp;&nbsp;&nbsp;&nbsp;//We&nbsp;need&nbsp;to&nbsp;substract&nbsp;the&nbsp;no.&nbsp;of&nbsp;lines &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;rc.text.length&nbsp;-&nbsp;add_newlines;&nbsp; &nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;return&nbsp;0;&nbsp;}