Fatal编程技术网
  • javascript/
  • Javascript 带有removeChild的Chrome跳跃插入符号错误

Javascript 带有removeChild的Chrome跳跃插入符号错误

javascript html

Javascript 带有removeChild的Chrome跳跃插入符号错误,javascript,html,Javascript,Html,有人能在Chrome上解释一下这个问题吗？函数的作用是将插入符号跳到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> <met

有人能在Chrome上解释一下这个问题吗？函数的作用是将插入符号跳到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>


var caretX=0
功能按键（事件）{
插入混凝土（“”）；
var caretpos=document.getElementById（'caretpos'）
//caretX=getX（caretpos）//查找元素的X位置
removeNode（caretpos）
返回（真）
}
//使用的功能：
函数insertcaret（文本，替换内容）{
如果（！text）{return（false）；}
如果（replaceContents==null）{replaceContents=false；}
如果（！replaceContents）{//折叠选择：
var sel=document.getSelection（）
选择collapseToStart（）
}
返回（document.execCommand（'insertHTML'，false，text））
}; 
函数removeNode（el）{
el.parentNode.removeChild（el）；
}
在此处键入一些内容，然后观察chrome中发生的情况
更新：
实际上，我试图通过插入一个虚拟元素，找到它的位置，然后删除它来获取用户插入符号的像素位置。这就是说，问题是chrome中的一个基本问题，以这种方式操作DOM会导致插入符号跳到元素的末尾，调用
文档后插入符号应该发生什么情况。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的浏览器中使用Range的
getBoundingClientRect（）
方法。请看我的回答：

最后，我一直在为我的库编写一个模块。它还没有完全完成，但这里有一个演示：

你到底想做什么？对不起，蒂姆，我正在尝试通过插入一个虚拟元素，找到它的位置，然后删除它来获取用户插入符号的像素位置。也就是说，这个问题是chrome中的一个基本问题，以这种方式操纵DOM会导致插入符号跳到元素的末尾。这很好！非常感谢蒂姆。兰吉看起来也很漂亮！我正在使用您在这里详细介绍的createElement方法重写我的insertcaret函数。在插入新节点之前，您能告诉我如何删除所选文本吗？您的意思是从文档中删除所选文本吗
sel.deleteFromDocument（）
。顺便说一句，如果你需要支持IE<9，你需要一种不同的方法来实现所有这些，因为那些浏览器不支持
范围
或
选择
。没错。我无法使deleteFromDocument（）工作，因为：。我做错什么了吗？@cronoklee:
replaceContents
未定义，因此
sel.deleteFromDocument（）
从未运行过。哎呀-是的，刚刚在setTimeout代码中发现了输入错误！非常感谢你的帮助，蒂姆-真的很有用的东西我一定会再次使用。