Finding the caret position in character in a div content editable with angular

Question

I m having some troubles while getting the cursor caret position inside of a div with contenteditable attribute.

Actually, I m using the following function :

  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
  }

The function onBlurArea is triggered when I blur a text-angular field :

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

Moreover :

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

• I need to get the cursor position to add some external stuff not managed by the library.

• My problem is that when I blur my field, my carretOffset is not the same if I focus on a precise field or on another one.

• The function above always gives me 0

• When I log the range, I m always having a div item that is completely out of my current focus, even out of text-angular module

EDIT : I think my problem is on the following line :

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

That give me something that I don't understand at all...

Answer 1

When blur event is fired, u have already lost your focus and the range created.

To get the caret offset just before the div lost focus, I would recommend you save the caret offset every time it changes. That is to say, update it every time keyup or mouseup is fired or when any other timing u would like to update it.

Check this plunkr

BTW, in this plunkr i used your getCaretCharacterOffsetWithin function to calculate the offset. But this function may be not working as expected. It will add some blanks to the content and the caret offset is larger than real.