javascript 在contenteditable div内的span元素后设置光标

xfb7svmp  于 2023-01-11  发布在  Java
关注(0)|答案(4)|浏览(337)

我怎样才能把光标放在contenteditable div中的span元素后面呢?现在,我在contenteditable div中的span元素中有一个图像。
当我添加一些字符时,它们被添加到span内部,但我希望它们被添加到span元素之后。有什么想法我可以实现这一点吗?

yvt65v4c

yvt65v4c1#

在IE〈= 8以外的浏览器中,可以这样做:

function placeCaretAfterNode(node) {
    if (typeof window.getSelection != "undefined") {
        var range = document.createRange();
        range.setStartAfter(node);
        range.collapse(true);
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

然而,一些浏览器(特别是基于WebKit的浏览器)对插入符号在文档中的有效位置有固定的概念,并会规范化您添加到选择中的任何范围以符合这些概念。下面的示例将在Firefox和IE 9中执行您想要的操作,但在Chrome或Safari中不执行:
http://jsfiddle.net/5dxwx/
没有一个解决方法是好的。选项包括:

  • 在范围后添加零宽空格字符并将其选中
  • 使用<a>元素而不是<span>,因为WebKit对<a>元素有例外
sz81bmfz

sz81bmfz2#

我设法使用带有&nbsp的“a”标记解决了这个问题。例如:-"<a>"+ content/element you want to add +"</a>&nbsp;"

5gfr0r5j

5gfr0r5j3#

这个函数管理我所想到的:

<script type="text/javascript">
function pasteHtmlAtCaret(char) {
        var sel = rangy.getSelection();
        var range = sel.rangeCount ? sel.getRangeAt(0) : null;
        var parent;
        if (range) {
            var parentEl = document.createElement("span");
        jQuery(parentEl).addClass('char').addClass('latest');
            parentEl.appendChild(range.createContextualFragment(char));

            // Check if the cursor is at the end of the text in an existing span
            if (range.endContainer.nodeType == 3
            && (parent = range.endContainer.parentNode)
            && (parent.tagName == "SPAN")) {
            range.setStartAfter(parent);
            }
            range.insertNode(parentEl);
        if(jQuery(parentEl).parent().get(0).tagName.toLowerCase() == 'span'){
            var spanParent = jQuery(parentEl).parent('span');
            var parentEl = jQuery('<span class="char latest spanchild"></span>').insertAfter(spanParent).append(parentEl).get(0);
        }
        jQuery("span.spanchild").each(function(index, element){
            var content = jQuery(element).children('span.char').first().html();
            jQuery(element).children('span.char').remove();
            jQuery(element).html(content);
            jQuery(element).removeClass('spanchild');
        });
            range.setStartAfter(parentEl);
            rangy.getSelection().setSingleRange(range);
        jQuery(parentEl).removeClass('latest');
        }
}
</script>
pvabu6sv

pvabu6sv4#

只需span.contentEditable = false到Tim的解决方案即可正常工作;)

相关问题