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跳轉脫字號錯誤

回答

相關問題