IT技术 - Javascript Contenteditable - 将光标/插入符号设置为索引 - 吾爱随笔录

Javascript Contenteditable - 将光标/插入符号设置为索引

IT技术 javascript jquery contenteditable

2021-02-03 17:20:14

我将如何修改这个（How to set caret(cursor) position in contenteditable element (div)?），以便它接受数字索引和元素并将光标位置设置为该索引？

例如：如果我有段落：

<p contenteditable="true">This is a paragraph.</p>

我打电话给：

setCaret($(this).get(0), 3)

光标会像这样移动到索引 3：

Thi|s is a paragraph.

我有这个，但没有运气：

function setCaret(contentEditableElement, index)
{
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();//Create a range (a range is a like the selection but invisible)
        range.setStart(contentEditableElement,index);
        range.collapse(true);
        selection = window.getSelection();//get the selection object (allows you to change selection)
        selection.removeAllRanges();//remove any selections already made
        selection.addRange(range);//make the range you have just created the visible selection
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
        range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        range.select();//Select the range (make it the visible selection
    }
}

http://jsfiddle.net/BanQU/4/

3个回答

这是改编自Persisting the changes of range objects after selection in HTML的答案。请记住，这在几个方面并不完美（就像 MaxArt 的一样，它使用相同的方法）：首先，只考虑文本节点，这意味着<br>索引中不包含和块元素隐含的换行符；其次，所有文本节点都会被考虑，即使是那些被 CSS 隐藏的内部<script>元素或内部元素；第三，在页面上折叠的连续空白字符都包含在索引中；最后，IE <= 8 的规则再次不同，因为它使用了不同的机制。

var setSelectionByCharacterOffsets = null;

if (window.getSelection && document.createRange) {
    setSelectionByCharacterOffsets = function(containerEl, start, end) {
        var charIndex = 0, range = document.createRange();
        range.setStart(containerEl, 0);
        range.collapse(true);
        var nodeStack = [containerEl], node, foundStart = false, stop = false;

        while (!stop && (node = nodeStack.pop())) {
            if (node.nodeType == 3) {
                var nextCharIndex = charIndex + node.length;
                if (!foundStart && start >= charIndex && start <= nextCharIndex) {
                    range.setStart(node, start - charIndex);
                    foundStart = true;
                }
                if (foundStart && end >= charIndex && end <= nextCharIndex) {
                    range.setEnd(node, end - charIndex);
                    stop = true;
                }
                charIndex = nextCharIndex;
            } else {
                var i = node.childNodes.length;
                while (i--) {
                    nodeStack.push(node.childNodes[i]);
                }
            }
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
} else if (document.selection) {
    setSelectionByCharacterOffsets = function(containerEl, start, end) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(containerEl);
        textRange.collapse(true);
        textRange.moveEnd("character", end);
        textRange.moveStart("character", start);
        textRange.select();
    };
}

当上面的代入（代码jsfiddle.net/zQUhV/20与您的代码）（jsfiddle.net/zQUhV/21）它似乎并没有工作。注意：jsfiddle 代码被构建为使用箭头键在最后 2 个段落之间遍历。它适用于第一个链接但不适用于第二个链接，但是当索引和文本长度相等时第一个链接断开，setCaret(prev.get(0), prev.text().length)

2021-03-18 17:20:14

@MaxArt：是的，我从未遇到过支持 Range 但不支持 TreeWalker 的浏览器（两者都来自 DOM Level 2，这是有道理的）。我改进了这些测试并制作了一个 jsPerf，它表明您在大多数浏览器中的速度是正确的。jsperf.com/text-node-traversal

2021-03-27 17:20:14

我看到你已经实现了一个迭代树遍历例程。但据我所知这些浏览器的支持getSelection支持document.createTreeWalker过，这是更快。所以我们应该去追求它。

2021-03-29 17:20:14

@RyanKing：您在 jsFiddle 中有语法错误（?而不是{）。jsfiddle.net/zQUhV/22

2021-03-31 17:20:14

我实际上很惊讶 TreeWalker在 Chrome 中的速度较慢：| 但无论如何它节省了一堆代码痛苦......

2021-04-07 17:20:14

range.setStart并且range.setEnd可以用于文本节点，而不是元素节点。否则他们将引发 DOM 异常。所以你要做的是

range.setStart(contentEditableElement.firstChild, index);

我不明白你为 IE8 及更低版本所做的。你的意思是在哪里使用index？

总的来说，如果节点的内容不止一个文本节点，您的代码就会失败。对于带有的节点，可能会发生这种情况isContentEditable === true，因为用户可以从 Word 或其他位置粘贴文本，或者创建新行等。

这是我在框架中所做的改编：

var setSelectionRange = function(element, start, end) {
    var rng = document.createRange(),
        sel = getSelection(),
        n, o = 0,
        tw = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, null);
    while (n = tw.nextNode()) {
        o += n.nodeValue.length;
        if (o > start) {
            rng.setStart(n, n.nodeValue.length + start - o);
            start = Infinity;
        }
        if (o >= end) {
            rng.setEnd(n, n.nodeValue.length + end - o);
            break;
        }
    }
    sel.removeAllRanges();
    sel.addRange(rng);
};

var setCaret = function(element, index) {
    setSelectionRange(element, index, index);
};

这里的技巧是使用setSelectionRange函数 - 选择内部和元素范围内的文本 - 与start === end. 在contentEditable元素中，这会将插入符号放在所需的位置。

这应该适用于所有现代浏览器，并且适用于不仅具有文本节点作为后代的元素。我会让你添加检查start并end在适当的范围内。

对于 IE8 及更低版本，事情有点困难。事情看起来有点像这样：

var setSelectionRange = function(element, start, end) {
    var rng = document.body.createTextRange();
    rng.moveToElementText(element);
    rng.moveStart("character", start);
    rng.moveEnd("character", end - element.innerText.length - 1);
    rng.select();
};

这里的问题是，innerText是不是好了这样的事情，因为一些白色的空间坍塌。如果只有一个文本节点，一切都很好，但是对于更复杂的东西，比如你在contentEditable元素中得到的那些，事情就会变得很糟糕。

IE8 不支持textContent，因此您必须使用TreeWalker. 但是 IE8 也不支持TreeWalker，所以你必须自己遍历 DOM 树......

我仍然必须解决这个问题，但不知何故我怀疑我永远不会。即使我做了代码填充工具用于TreeWalker在IE8和降低...

谢谢，我应该提到我从来没有使用过 IE8 和更低的代码。我从来没有考虑过人们将文本粘贴到元素中 - 我必须研究一下。

2021-03-16 17:20:14

@keligijus 啊，讨厌的小错误......看起来检查o >= start可以解决问题，但是，如果光标位于新行的开头，它会被带回到上一行的末尾。那是因为，按文本计算，它是“相同”的位置......在一些边缘情况下玩得开心。:|

2021-03-18 17:20:14

在 IE <= 8 中，为什么不先使用 TextRange 的moveEnd()方法？rng.moveEnd("character", end); rng.moveStart("character", start);

2021-03-21 17:20:14

@TimDown 是的，但在 Ryan 的情况下，它会引发异常，因为第二个参数是 3（小提琴中的 5）。谢谢你指出，虽然不清楚。我没有使用，collapse因为函数是setSeletionRange，然后被调用，setCaret但它通常会创建非折叠的选择。

2021-03-24 17:20:14

setStart()和setEnd()范围方法绝对可以用于元素，但偏移量表示元素在边界之前的子节点数而不是字符索引。

2021-03-27 17:20:14

这是我对蒂姆答案的改进。它删除了关于隐藏字符的警告，但其他警告仍然存在：

仅考虑文本节点（<br> 隐含的换行符和块元素不包含在索引中）
考虑所有文本节点，甚至那些被 CSS 隐藏的内部元素或内部元素
IE <= 8 的规则再次不同，因为它使用了不同的机制。

代码：

var setSelectionByCharacterOffsets = null;

if (window.getSelection && document.createRange) {
    setSelectionByCharacterOffsets = function(containerEl, start, end) {
        var charIndex = 0, range = document.createRange();
        range.setStart(containerEl, 0);
        range.collapse(true);
        var nodeStack = [containerEl], node, foundStart = false, stop = false;

        while (!stop && (node = nodeStack.pop())) {
            if (node.nodeType == 3) {
                var hiddenCharacters = findHiddenCharacters(node, node.length)
                var nextCharIndex = charIndex + node.length - hiddenCharacters;

                if (!foundStart && start >= charIndex && start <= nextCharIndex) {
                    var nodeIndex = start-charIndex
                    var hiddenCharactersBeforeStart = findHiddenCharacters(node, nodeIndex)
                    range.setStart(node, nodeIndex + hiddenCharactersBeforeStart);
                    foundStart = true;
                }
                if (foundStart && end >= charIndex && end <= nextCharIndex) {
                    var nodeIndex = end-charIndex
                    var hiddenCharactersBeforeEnd = findHiddenCharacters(node, nodeIndex)
                    range.setEnd(node, nodeIndex + hiddenCharactersBeforeEnd);
                    stop = true;
                }
                charIndex = nextCharIndex;
            } else {
                var i = node.childNodes.length;
                while (i--) {
                    nodeStack.push(node.childNodes[i]);
                }
            }
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
} else if (document.selection) {
    setSelectionByCharacterOffsets = function(containerEl, start, end) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(containerEl);
        textRange.collapse(true);
        textRange.moveEnd("character", end);
        textRange.moveStart("character", start);
        textRange.select();
    };
}

var x = document.getElementById('a')
x.focus()
setSelectionByCharacterOffsets(x, 1, 13)

function findHiddenCharacters(node, beforeCaretIndex) {
    var hiddenCharacters = 0
    var lastCharWasWhiteSpace=true
    for(var n=0; n-hiddenCharacters<beforeCaretIndex &&n<node.length; n++) {
        if([' ','\n','\t','\r'].indexOf(node.textContent[n]) !== -1) {
            if(lastCharWasWhiteSpace)
                hiddenCharacters++
            else
                lastCharWasWhiteSpace = true
        } else {
            lastCharWasWhiteSpace = false   
        }
    }

    return hiddenCharacters
}

其它你可能感兴趣的问题

上一篇如何使用greasemonkey从网站上有选择地删除内容下一篇javascript中的这个运算符