角度

Question

で編集可能なdivのコンテンツに文字でキャレット位置を見つける私はのcontentEditable属性を持つdiv要素の内側にカーソルをキャレット位置の取得中にいくつかのトラブルを抱えてメートル。

実際に、私は次の関数を使用して、M：

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 
    } 

Iは、テキスト角度フィールドぼかし場合関数onBlurAreaがトリガされる：また

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

：

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

を

• 私はカーを取得する必要がありますライブラリによって管理されていない外部のものを追加することができます。

• 私の問題は、私は私のフィールドをぼかしたときに、私は正確なフィールドまたは別の1に焦点を当てた場合、私のcarretOffsetが同じではないということです。常に上記

• 機能は、私は範囲をログインすると、私はいつもにも、テキストの角度モジュールのうち

、完全に私の現在の焦点が合っていないのdiv項目を持つmは私に0

を与えます

編集：私は私の問題は、次の行にあると思う：...私が全く理解できない何かを与える

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

Answer 1

blurイベントが発生すると、あなたは既にあなたのフォーカスを失い、その範囲が作成されました。 div要素がフォーカスを失った前

キャレットがちょうど相殺するには、私はあなたがそれを変更するたびにオフセットキャレットを保存することをお勧めします。それはそれを毎回keyupまたはmouseupを更新し、言うことであることはuはそれを更新したいと思い、他のタイミングを発射した場合、またはされています。

チェックthis plunkr

ところで、このplunkrに私はオフセットを計算するためにあなたのgetCaretCharacterOffsetWithin機能を使用していました。しかし、この機能は期待どおりに機能していない可能性があります。内容に空白が追加され、キャレットオフセットが実数よりも大きくなります。