Wil*_*ken 3 html javascript contenteditable
这是完整的页面：
<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 开发）
由于 clean2() 操作 div，焦点正在丢失。在 FF 中，出于同样的原因，插入符号被重置为可编辑 div 的开头。您可以通过手动调用el.focus()clean2()来强制保持焦点，但这不会解决插入符号问题。您可以使用以下内容设置插入符号位置：
window.getSelection().removeAllRanges();
var range = document.createRange();
range.setStart(el,start)
range.setEnd(el,start);
window.getSelection().addRange(range);
但是，这对您不起作用，因为您需要在其中设置光标位置的“el”是新创建的文本节点。不幸的是，您尝试执行的语法突出显示类型非常复杂。如果你想追求它，请查看：
在 contentEditable <div> 上设置光标位置
在 contentEditable div 中获取插入符号位置