修改的innerHTML在CONTENTEDITABLE =“真” DIV导致焦点或选择错误的损失

以下是完整的页面：修改的innerHTML在CONTENTEDITABLE =“真” DIV导致焦点或选择错误的损失

<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 
    .edit { border: 1px solid blue; font-size: 20pt } 
</style> 
<script type="text/javascript"> 
    function clean(id) { 
    setTimeout('clean2("'+id+'")', 1) 
    } 
    function clean2(id) { 
    el=document.getElementById(id) 
    off=window.getSelection().anchorOffset 
    el.innerHTML = el.innerHTML.replace(/(<([^>]+)>)/ig,""); 
    el.innerHTML = el.innerHTML.replace(/([0-9])/ig,"<font color='red'>$1</font>"); 
    return false; 
    } 
</script> 
</head> 

<body onload="document.getElementsByClassName('edit')[0].focus()"> 

<h1>Type in here</h1> 
<div id="e1" class="edit" contentEditable="true" onkeyup="clean('e1')"></div> 

</body> 
</html>

这里的目标是要强调所有号码为红色。（将来我会用一些更复杂的着色规则）。目前这种颜色替换正在发生，但只要您将某个数字添加到框中，焦点就会丢失。

任何提示？（使用Chorme dev）

来源

2011-03-02 Full Decent

焦点正在丢失，因为clean2（）操作div。在FF中，由于相同的原因，插入符号被重置为可编辑div的开头。您可以通过在clean2（）中手动调用el.focus()来强制保持焦点，但这不会修复插入符号问题。您可以设置插入位置的东西，如：

window.getSelection().removeAllRanges(); 
var range = document.createRange(); 
range.setStart(el,start) 
range.setEnd(el,start); 
window.getSelection().addRange(range);

但是，你这不会工作，因为“厄尔尼诺”你需要设置光标位置是新创建的文本节点。不幸的是，你试图做的语法突出类型非常复杂。如果你想追求它，请上网：

Set cursor position on contentEditable <div>

Get caret position in contentEditable div

来源

2011-03-02 10:41:52 jordancpaul

谢谢你，我正在使用这两个来保留和重置选择。 – 2011-03-05 17:26:20