我正在尝试在 Shadow-dom 中实现自定义文本编辑器功能。我需要获取 contenteditable div 内的当前光标位置。
我已经尝试过几种方法。但他们都没有给出所需的输出。
我是javascript的新手,试图执行:
document.selection.createRange();
但document.selection总是回来 undefined.
我正在使用最新版本的chrome.
我究竟做错了什么？
谢谢!
这是完整的页面：
<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 开发）
有没有一种方法可以使文本contenteditable div从开始到光标位置。
例如：
<div id="editableDiv" contenteditable="true">
the quick brown fox jumps over a lazy dog.
</div>
假设1：光标在单词quick之后闪烁。对函数的查询必须返回快速
假设2：光标在句子的末尾闪烁。该函数的查询必须返回快速的棕色狐狸跳过一条懒狗。