7

我有这段代码，我用它来获取光标在可编辑 div 中的位置：

   function getMeCurPos(element){
       if (typeof window.getSelection != "undefined") {
          var range = window.getSelection().getRangeAt(0);
          var preCaretRange = range.cloneRange(); 
          preCaretRange.selectNodeContents(element);
          preCaretRange.setEnd(range.endContainer, range.endOffset); 
          caretOffset = preCaretRange.toString().length;  
          return caretOffset;
       }                        
   }

问题是，返回的 caretOffset 只计算文本内容而不是 html 标签。例如：

在我的可编辑 div 中考虑这个字符串： Hey <b>jony</b>, whats goin on in the | party

*光标用|字符表示。

做 getMeCurPos(ele) 返回：30但它应该返回37。它不计算b标签

4

3 回答 3

1

您可以创建一个临时div文件，您可以在其中放置您的文件preCaretRange以及可以使用的位置textContent或innerText上面。这不会占用 HTML 长度，而是它周围的文本。

 function getMeCurPos(element){
       if (typeof window.getSelection != "undefined") {
          var range = window.getSelection().getRangeAt(0);
          var preCaretRange = range.cloneRange(); 
          preCaretRange.selectNodeContents(element);
          preCaretRange.setEnd(range.endContainer, range.endOffset); 
          var temp = document.createElement("div");
          temp.innerHTML = preCaretRange.toString();
          var sanitized = temp.textContent || temp.innerText;
          caretOffset = sanitized.length;
          return caretOffset;
       }                        
}

看到这个小提琴

于 2013-04-15T09:02:23.563 回答
1

要获取文本和 DOM 节点的选择，您可以cloneContents()在 Javascript 选择范围中使用。HTML如下

function getMeCurPos(element) {
  if (typeof window.getSelection != "undefined") {
    var range = window.getSelection();
    cloned.innerHTML = '';
    for (let i = 0; i < range.rangeCount; i++) {
      cloned.append(range.getRangeAt(i).cloneContents());
    }

    var sanitized = cloned.innerHTML;
    caretOffset = sanitized.length;
    return caretOffset;
  }
}
<p contenteditable="true" id="test" onclick="alert(getMeCurPos(this))">Test1<br>Test2<br>Test3<br>Test4</p>
<br>
Cloned: <span id="cloned"></span>

于 2019-09-24T12:37:31.463 回答
0

我从这篇文章中获取了代码： Select all DIV text with single mouse click

            <script type="text/javascript">
                function selectText(containerid) {
                    if (document.selection) {
                        var range = document.body.createTextRange();
                        range.moveToElementText(document.getElementById(containerid));
                        range.select();
                    } else if (window.getSelection) {
                        var range = document.createRange();
                        range.selectNode(document.getElementById(containerid));
                        window.getSelection().addRange(range);
                    }
                }
            </script>

            <div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>
于 2015-02-24T11:54:55.260 回答