如何使用javascript获取&使用字符偏移量设置插入符号位置

How do I use javascript to get & set caret position using character offset?

本文关键字：偏移量 字符 设置 插入 位置 符号 javascript 何使用 获取 amp      更新时间：2024-06-18

有没有一种方法可以使用javascript来获取&使用字符偏移量（相对于文档开头）设置插入符号位置？

在我的情况下，由于多种原因，首选使用的值是字符偏移量，而不是dom节点。有没有一种相当快速（没有明显的时间）的方法来实现这一点？我更愿意将任何"p"标记视为字符（"''n"），但如果这使得解决方案不可能实现，则可以忽略它们

编辑：由于这显然令人困惑，我之所以询问插入符号，是因为有插入符号。不是因为没有。[那些不了解contentEditable的人无论如何都没有机会回答这个问题，所以我认为没有必要解释]。既然我被要求证明我已经尝试过了，但不知道我要问的问题的解决方案（我想知道，否则我为什么要问？），这是我能做的最好的尝试。它没有给出正确的答案。

编辑：它现在给出了正确的答案；唯一的问题是是否有javascript方法或更简单、更快的方法。

编辑：修正了在换行后选择结束时给出正确答案的问题。

        function nodeOffset(findnode) {
            var offset = 0;
            var root = document.body
            var node = root.childNodes[0];
            while(node != null) {
                if(node.nodeType == 3) {
                    if(node == findnode)
                        return offset;
                    offset += node.length; //text
                } else if (node.tagName == 'P') {
                    offset += 1; //newline character
                    if(node == findnode)
                        return offset;
                }
                if(node.hasChildNodes()) {
                    node = node.firstChild;
                } else {
                    while(node.nextSibling == null && node != root) {
                        node = node.parentNode;
                    }
                node = node.nextSibling;
                }
            }
        }
        var selection = window.getSelection();
        var offset = nodeOffset(selection.focusNode) + selection.focusOffset;

一种暴力方法。（它很有可能跳闸，例如，如果其他标签是display:block，或者如果p不是display:block，或者其他可能的问题）：

要获得选择插入符号/锚点偏移量，它可能是一个相同的：

        function nodeOffset(findnode) {
            var offset = 0;
            var root = document.body
            var node = root.childNodes[0];
            while(node != null) {
                if(node.nodeType == 3) {
                    if(node == findnode)
                        return offset;
                    offset += node.length; //text
                } else if (node.tagName == 'P') {
                    offset += 1; //newline character
                    if(node == findnode)
                        return offset;
                }
                if(node.hasChildNodes()) {
                    node = node.firstChild;
                } else {
                    while(node.nextSibling == null && node != root) {
                        node = node.parentNode;
                    }
                node = node.nextSibling;
                }
            }
        }
        var selection = window.getSelection();
        var focusoffset = nodeOffset(selection.focusNode)+selection.focusOffset;
        var anchoroffset = nodeOffset(selection.anchorNode)+selection.anchorOffset;

要设置插入符号/锚点偏移量，尽管它们必须按最小->最大的顺序排列，但不能选择要聚焦的内容；要锚定的：

        function offsetNode(findoffset) {
            var offset = 0;
            var root = document.body
            var node = root.childNodes[0];
            while(node != null) {
                if(node.nodeType == 3) {
                    offset += node.length; //text
                    if(offset >= findoffset)
                        return [node, findoffset-offset+node.length];
                } else if (node.tagName == 'P') {
                    offset += 1; //newline character
                }
                if(node.hasChildNodes()) {
                    node = node.firstChild;
                } else {
                    while(node.nextSibling == null && node != root) {
                        node = node.parentNode;
                    }
                node = node.nextSibling;
                }
            }
        }
        var selection = window.getSelection();
        var range = document.createRange();
        var start = offsetNode(startoffset)
        var end = offsetNode(endoffset)
        range.setStart(start[0], start[1]);
        range.setEnd(end[0], end[1]);
        selection.removeAllRanges();
        selection.addRange(range);
相关文章：