Question

有人可以在Chrome中解决这个问题吗？ removeChild（）函数使插入符跳转到div的末尾。有人有解决方法吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var caretX = 0

function keypress(event){
    insertAtCaret('<span id="caretpos"></span>');
    var caretpos = document.getElementById('caretpos')
    //caretX = getX(caretpos) //finds the X position of the element
    removeNode(caretpos)
    return(true)
}

//Functions used:
function insertAtCaret(text,replaceContents) {
    if(!text){return(false);}
    if(replaceContents==null){replaceContents=false;}
    if(!replaceContents){//collapse selection:
        var sel = document.getSelection()
        sel.collapseToStart()
    }
    return(document.execCommand('insertHTML', false, text))
}; 
function removeNode(el){
    el.parentNode.removeChild(el);
}
</script>
</head>

<body contentEditable="true" onkeypress="return(keypress(event))">
<div>Type some content somewhere here   &gt; &lt; and watch what happens in chrome</div>
</body>
</html>

更新：我实际上是想通过插入一个虚拟元素，找到它的位置然后将其删除来获取用户插入符号的像素位置。也就是说，问题是chrome中的一个基本问题，以这种方式操纵DOM导致插入符号跳转到元素的末尾

Answer 1

在调用document.execCommand('insertHTML')之后，插入符号究竟应该发生什么是未定义的，但我同意Chrome的行为无益。您可以使用Range的insertNode()方法来添加虚拟元素：

var sel = window.getSelection();
sel.collapseToStart();
var span = document.createElement("span");
var range = sel.getRangeAt(0);
range.insertNode(span);

// Get the position here...

span.parentNode.removeChild(span);

整个方法的另一种方法是在支持它的浏览器中使用Range的getBoundingClientRect()方法。请在此处查看我的回答：

Coordinates of selected text in browser page

最后，我一直在为我的Rangy库编写一个模块来执行此操作。它还没有完成，但这里有一个演示：http://rangy.googlecode.com/svn/trunk/demos/position.html

使用removeChild的Chrome跳跃插入错误

1 个答案: