如何在可内容元素(Div)中设置插入符号(游标)位置？

Question

如何在可内容元素(Div)中设置插入符号(游标)位置？我以这个简单的HTML为例：<div id="editable" contenteditable="true">   text text text<br>   text text text<br>   text text text<br></div><button id="button">focus</button>我想要简单的事情-当我点击按钮时，我想把插入符号(光标)放在可编辑的div中的特定位置。从网上搜索，我有这个JS附在按钮点击，但它不工作(FF，Chrome)：var range = document.createRange();var myDiv = document.getElementById("editable");range.setStart(myDiv, 5);range.setEnd(myDiv, 5);是否可以像这样手动设置插入符号的位置？

Answer 1

您在可内容光标定位上找到的大多数答案都相当简单，因为它们只满足普通文本的输入。一旦在容器中使用html元素，输入的文本就会被分割成节点，并在树结构中自由分布。

为了设置光标位置，我有一个函数，它循环在所提供节点内的所有子文本节点，并设置一个范围，从初始节点的开始到字符数性格：

function createRange(node, chars, range) {
    if (!range) {
        range = document.createRange()
        range.selectNode(node);
        range.setStart(node, 0);
    }

    if (chars.count === 0) {
        range.setEnd(node, chars.count);
    } else if (node && chars.count >0) {
        if (node.nodeType === Node.TEXT_NODE) {
            if (node.textContent.length < chars.count) {
                chars.count -= node.textContent.length;
            } else {
                range.setEnd(node, chars.count);
                chars.count = 0;
            }
        } else {
           for (var lp = 0; lp < node.childNodes.length; lp++) {
                range = createRange(node.childNodes[lp], chars, range);

                if (chars.count === 0) {
                    break;
                }
            }
        }
    } 

    return range;};

然后用这个函数调用例程：

function setCurrentCursorPosition(chars) {
    if (chars >= 0) {
        var selection = window.getSelection();

        range = createRange(document.getElementById("test").parentNode, { count: chars });

        if (range) {
            range.collapse(false);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }};

折叠(False)将光标设置为范围的末尾。我用Chrome、IE、Mozilla和Opera的最新版本测试了它，它们都很好。

PS。如果有人感兴趣，我将使用以下代码获得当前光标位置：

function isChildOf(node, parentId) {
    while (node !== null) {
        if (node.id === parentId) {
            return true;
        }
        node = node.parentNode;
    }

    return false;};function getCurrentCursorPosition(parentId) {
    var selection = window.getSelection(),
        charCount = -1,
        node;

    if (selection.focusNode) {
        if (isChildOf(selection.focusNode, parentId)) {
            node = selection.focusNode; 
            charCount = selection.focusOffset;

            while (node) {
                if (node.id === parentId) {
                    break;
                }

                if (node.previousSibling) {
                    node = node.previousSibling;
                    charCount += node.textContent.length;
                } else {
                     node = node.parentNode;
                     if (node === null) {
                         break
                     }
                }
           }
      }
   }

    return charCount;};

代码执行与set函数相反的操作-它获取当前的window.getSelections().ocusNode和ocusOffset，并向后计数所遇到的所有文本字符，直到它到达具有容器ID id的父节点为止。isChilOf函数只是在运行之前检查所述节点是否实际上是所提供的节点的子节点。父母.

这些代码应该在不改变的情况下直接工作，但是我刚刚从我开发的jQuery插件中获取了它，所以我已经黑掉了几个这是-如果有什么不管用的话，请告诉我！

Answer 2

如果不想使用jQuery，可以尝试以下方法：

public setCaretPosition() {
    const editableDiv = document.getElementById('contenteditablediv');
    const lastLine = this.input.nativeElement.innerHTML.replace(/.*?(<br>)/g, '');
    const selection = window.getSelection();
    selection.collapse(editableDiv.childNodes[editableDiv.childNodes.length - 1], lastLine.length);}

editableDiv您的可编辑元素，请不要忘记设置id为了它。那你就得把你的innerHTML切断所有刹车线。然后用下一个参数来设置崩溃。