Chrome浏览器使用removeChild跳转脱字号错误

有人可以在Chrome浏览器中解决这个问题吗？ removeChild（）函数使插入符跳转到div的末尾。任何人都有解决方法？Chrome浏览器使用removeChild跳转脱字号错误

<!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会导致脱字符号跳到元素的末尾

来源

2011-10-12 cronoklee

你究竟想要做什么？ –

对不起蒂姆我试图通过插入一个虚拟元素，找到它的位置，然后将其删除，以获得用户的插入符号的像素位置。也就是说，这个问题是Chrome中的一个基本问题，通过这种方式操纵DOM会使脱字符跳到元素的末尾 – cronoklee

调用document.execCommand('insertHTML')后插入符号的确切内容未定义，但我同意Chrome的行为无益。你可以避开它通过使用范围的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);

的另一种方法，整个事情是使用范围的getBoundingClientRect()方法支持它的浏览器。看到这里我的答案：

Coordinates of selected text in browser page

最后，我已经写了一个模块，为我Rangy库做到这一点。这不是完成，但有一个演示在这里：http://rangy.googlecode.com/svn/trunk/demos/position.html

来源

2011-10-12 08:31:56

这真是太棒了！非常感谢蒂姆。 Rangy看起来也很棒！我正在使用您在此处详述的createElement方法重写我的insertAtCaret函数。你可以让我知道如何在插入新节点之前删除选定的文本？ – cronoklee

你的意思是从文档中删除选定的文本？ 'sel.deleteFromDocument（）'如果是。顺便说一句，如果你需要支持IE <9，你将需要一个不同的方法，因为这些浏览器不支持'范围'或'选择'。 –

是的。我不能得到deleteFromDocument（）工作寿：http://collabedit.com/4phyt。难道我做错了什么？ – cronoklee

Chrome浏览器使用removeChild跳转脱字号错误

回答

相关问题