时间戳

首页 > 解决方案 > 在javascript中获取错误的插入符号位置

javascript - 在javascript中获取错误的插入符号位置

问题描述

从上下文菜单中选择内容可编辑 div 内的插入符号位置后，我试图插入令牌。如果插入符号位置在一行中，我已经设法做到了。

在我的情况下，只要出现其他 HTML 标记，即当行更改时，范围偏移值将设置为 0。我正在使用这两个函数来获取我在stackoverflow中找到的范围。

任何帮助表示赞赏！

    function saveSelection() {
        var range = null;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
               return sel.getRangeAt(0);
            }
        } else if (document.selection && document.selection.createRange) {
            return document.selection.createRange();
        }
        return null;
    }

标签： javascriptasp.net

解决方案

我认为问题不在于元素中的内容行数，即contenteditable. 因为您正在使用上下文菜单，contenteditable div正如您所提到的。并且当您单击上下文菜单时，它将获得该上下文菜单的范围值。

因此，您应该在单击某个菜单之前将范围值存储在某个变量上。

由于您的代码不完整，我无法将任何示例与您的代码联系起来。

这是一个示例，希望对您有所帮助：

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
            
            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}
<input type="button" value="Paste HTML" onclick="document.getElementById('test').focus(); pasteHtmlAtCaret('<b>INSERTED</b>'); ">

<div id="test" contenteditable="true">
    Here is some nice text
</div>

上述代码的 jsfiddle 链接。

推荐阅读