Question

我在使用contenteditable属性获取div中的光标插入位置时遇到了一些麻烦。

实际上，我使用以下功能：

  onBlurArea (field, ev) {
    ev.preventDefault()
    const editable = ev.target.childNodes[1].childNodes[2]
    this.positions[field] = {start: this.getCaretCharacterOffsetWithin(editable), editable}
  }

  getCaretCharacterOffsetWithin (element) {
    let ie = (typeof this.doc.selection != 'undefined' && this.doc.selection.type != 'Control') && true
    let w3 = (typeof this.win.getSelection != 'undefined') && true
    let caretOffset = 0
    if (w3) {
      let range = this.win.getSelection().getRangeAt(0)
      console.log(range)
      let preCaretRange = range.cloneRange()
      preCaretRange.selectNodeContents(element)
      preCaretRange.setEnd(range.endContainer, range.endOffset)
      console.log(preCaretRange)
      caretOffset = preCaretRange.toString().length
      console.log(caretOffset)
    }
    else if (ie) {
      let textRange = this.doc.selection.createRange()
      let preCaretTextRange = this.doc.body.createTextRange()
      preCaretTextRange.expand(element)
      preCaretTextRange.setEndPoint('EndToEnd', textRange)
      caretOffset = preCaretTextRange.text.length
    }
    return caretOffset
  }

当我模糊文本角度字段时触发函数onBlurArea：

<text-angular ng-model="moduleManage.currentModule.description" required ng-blur="moduleManage.onBlurArea('description', $event)"></text-angular>

此外：

this.doc = $document
this.win = $window

我需要获取光标位置以添加一些不受库管理的外部内容。
我的问题是，当我模糊我的场地时，如果我专注于精确的场地或另一个场地，我的carretOffset就不一样了。
上面的函数总是给我0
当我记录范围时，我总是有一个完全超出当前焦点的div项目，即使是文本角度模块

编辑：我认为我的问题出在以下几行：

let range = this.win.getSelection().getRangeAt(0)

这给了我一些我根本不懂的东西......

Answer 1

当blur事件被触发时，你已经失去焦点并且已经创建了范围。

为了在div失去焦点之前获得插入符号偏移，我建议您在每次更改时保存插入符偏移量。也就是说，每当keyup或mouseup被解雇或者您想要更新它的任何其他时间时更新它。

检查this plunkr

BTW，在这个plunkr中，我使用你的getCaretCharacterOffsetWithin函数来计算偏移量。但是这个功能可能没有按预期工作。它会为内容添加一些空白，插入符号偏移量大于实际值。

在使用angular可编辑的div内容中查找字符中的插入位置

1 个答案: