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

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