在contentEditable div中获取插入位置 [英] Get caret position in contentEditable div

问题描述

我找到了很多关于如何在contentEditable DIV中设置光标或插入位置的好的，交叉浏览器的答案，但没有关于如何获取或找到它的位置......

我想要做的是在密钥上知道这个div中插入符号的位置。

因此，当用户输入文字时，我可以随时知道光标在div中的位置。

<编辑：我正在寻找div内容（文本）中的INDEX，而不是光标坐标。

 < div id =contentBoxcontentEditable =true>< / div> 
 
 $（'＃contentbox'）。keyup（function（）{
 // ...？
}）; 
  

解决方案

以下代码假定：

• 可编辑的< div> 中总有一个文本节点，没有其他节点


• 可编辑div没有将CSS 空格属性设置为 pre

代码：

  function getCaretPosition（editableDiv） {var caretPos = 0，sel，range; if（window.getSelection）{sel = window.getSelection（）; if（sel.rangeCount）{range = sel.getRangeAt（0）; if（range.commonAncestorContainer.parentNode == editableDiv）{caretPos = range.endOffset; } else} if（document.selection&& document.selection.createRange）{range = document.selection.createRange（）; if（range.parentElement（）== editableDiv）{var tempEl = document.createElement（span）; editableDiv.insertBefore（tempEl，editableDiv.firstChild）; var tempRange = range.duplicate（）; tempRange.moveToElementText（寺）; tempRange.setEndPoint（EndToEnd，range）; caretPos = tempRange.text.length; } return caretPos;}  

  #caretposition {font-weight ：bold;}  

 < script src =https： //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script><div id =contentboxcontenteditable =true>点击我移动带键或鼠标的光标< / div>< div id =caretposition> 0< / div>< script> var update = function（）{$（'＃caretposition'）。html（getCaretPosition（this））; }; $（'＃contentbox'）。on（mousedown mouseup keydown keyup，更新）;< / script>  

I'm finding tons of good, crossbrowser anwers on how to SET the cursor or caret position in a contentEditable DIV, but none on how to GET or find its position...

What I want to do is know the position of the caret within this div, on keyup.

So, when the user is typing text, I can at any point know its cursor's position within the div.

EDIT: I'm looking for the INDEX within the div contents (text), not the cursor coordinates.

<div id="contentBox" contentEditable="true"></div>

$('#contentbox').keyup(function() { 
    // ... ? 
});

解决方案

The following code assumes:

• There is always a single text node within the editable <div> and no other nodes
• The editable div does not have the CSS white-space property set to pre

Code:

function getCaretPosition(editableDiv) {
  var caretPos = 0,
    sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == editableDiv) {
        caretPos = range.endOffset;
      }
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
      var tempEl = document.createElement("span");
      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
      var tempRange = range.duplicate();
      tempRange.moveToElementText(tempEl);
      tempRange.setEndPoint("EndToEnd", range);
      caretPos = tempRange.text.length;
    }
  }
  return caretPos;
}

#caretposition {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contentbox" contenteditable="true">Click me and move cursor with keys or mouse</div>
<div id="caretposition">0</div>
<script>
  var update = function() {
    $('#caretposition').html(getCaretPosition(this));
  };
  $('#contentbox').on("mousedown mouseup keydown keyup", update);
</script>

这篇关于在contentEditable div中获取插入位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！