有人可以阐明 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 > < and watch what happens in chrome</div>
</body>
</html>
更新: 我实际上试图通过插入一个虚拟元素来获取用户插入符号的像素位置，找到它的位置然后将其删除。也就是说，问题是 chrome 中的一个基本问题，以这种方式操作 DOM 会导致插入符号跳到元素的末尾
最佳答案
调用 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
关于javascript - 带有 removeChild 的 Chrome 跳转符号错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7733921/