Javascript 基于字符偏移量在可编辑div内设置光标位置

好的，我需要一个“输入”，允许突出显示“无效”的部分

因为我不能用实际的输入来实现这一点，所以我使用了

div

和

contenteditable=true

。该算法在概念上相当简单：

• 在

  keyup上

  • 验证输入
  • 将

    div

    的innerHtml替换为具有正确类的

    span

    s
  • 使用CSS设置错误样式
  • 恢复光标位置s.t.用户只需继续键入即可

最后一部分给了我一些问题

我发现，这对于获得偏移量非常有效，但是，我试图恢复它

函数setCursorPositionIn（元素，位置）{
const doc=element.ownerDocument | | element.document；
const win=doc.defaultView | | doc.parentWindow；
让我们选择；
const newPosition=document.createRange（）
newPosition.setStart（元素，0）
newPosition.setEnd（元素，0）
元素focus（）；
if（typeof win.getSelection！=“未定义”）{
sel=win.getSelection（）；
如果（选择范围计数>0）{
选择removeAllRanges（）；
}
新建位置。选择节点内容（元素）；
newPosition.setStart（newPosition.startContainer，pos）
newPosition.setEnd（newPosition.endContainer，pos）；
选择添加范围（新位置）
}如果（（选择=文件选择）&&sel.type！=“控制”）{
抛出错误（'不支持IE'）
}
}

失败是因为

Uncaught DOMException: Failed to execute 'setStart' on 'Range': There is no child at offset 11.
    at setCursorPositionWithin

如何正确构造此范围

---

好的，所以问题似乎正是它所说的：范围试图将光标位置设置在

n

th位置，如果

n

足够大，则可能不存在该位置

如果我们不只是用类包装

span

s中的错误部分，而是将每个字符包装在自己的span中，那么问题是可以解决的

---

我还没有弄明白为什么

getCursorPositionWithin

是这样工作的，如果是这样的话，但我想这是另一个问题。

好的，所以问题似乎正是它所说的：范围试图将光标位置设置在

n

th位置，如果

n

足够大，则可能不存在

如果我们不只是用类包装

span

s中的错误部分，而是将每个字符包装在自己的span中，那么问题是可以解决的

如果是这样的话，我还没有弄清楚为什么

getCursorPositionWithin

会这样工作，但我想这是另一个问题