在contenteditable div中包含标签的插入符号位置 [英] Get caret position in contenteditable div including tags

问题描述

我有一个可以理解的div，其中有多个标签（br，b，u，i）和文本，我需要获得相对于div的插入符号位置，包括所有标签。

例如：

 < div id =h CONTENTEDITABLE = 真 > ABC< b取代; DEF<峰; br> GHI< / b个JKL< / DIV> 
  

如果光标在g和h之间，我需要插入位置为14.
问题是在这种情况下找到的使用treeWalker的方法不起作用。
未找到粗体标记...可能是因为它未关闭。
我也尝试了几种方法，但仍然没有运气。

我需要它在Firefox中工作。
谢谢。

解决方案

你有没有试过这个？
获取范围的开始和结束偏移量相对于其父容器的值

直接链接到jsfiddle：
https://jsfiddle.net/TjXEG/1/

功能码：

 函数getCaretCharacterOffsetWithin（element）{
 var caretOffset = 0; 
 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; 
} else if（typeof document.selection！=undefined&&& document.selection.type！=Control）{
 var textRange = document.selection.createRange（）; 
 var preCaretTextRange = document.body.createTextRange（）; 
 preCaretTextRange.moveToElementText（element）; 
 preCaretTextRange.setEndPoint（EndToEnd，textRange）; 
 caretOffset = preCaretTextRange.text.length; 
} 
 return caretOffset; 
 
 
函数showCaretPos（）{
 var el = document.getElementById（test）; 
 var caretPosEl = document.getElementById（caretPos）; 
 caretPosEl.innerHTML =插入位置：+ getCaretCharacterOffsetWithin（el）; 
} 
 
 document.body.onkeyup = showCaretPos; 
 document.body.onmouseup = showCaretPos; 
  

I have a contenteditable div in which I have multiple tags (br, b, u, i) and text and I need to get the caret position relative to the div, including all the tags.

For example:

<div id="h" contenteditable="true">abc<b>def<br>ghi</b>jkl</div>

If the cursor is between g and h, I need the caret position to be 14. The problem is that the found methods that use a treeWalker do not work in this case. The bold tag is not found... probably because it isn't closed. Also I have tried several methods but still no luck.

I need it to work in Firefox. Thank you.

解决方案

Have you tried this? Get a range's start and end offset's relative to its parent container

Direct link to the jsfiddle: https://jsfiddle.net/TjXEG/1/

Function code:

function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    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;
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        var preCaretTextRange = document.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

function showCaretPos() {
    var el = document.getElementById("test");
    var caretPosEl = document.getElementById("caretPos");
    caretPosEl.innerHTML = "Caret position: " + getCaretCharacterOffsetWithin(el);
}

document.body.onkeyup = showCaretPos;
document.body.onmouseup = showCaretPos;

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