編集可能なカーソル位置のdiv

参考:

https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt

https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange

MDNのこれらの不安定APIことを示唆しています。これは、IE9 +、Googleのは、Firefoxと互換性があります

1 VAR SEL = window.getSelection()変数は、現在のページがSEL領域を選択されます

選択された領域の2 VAR objRange = sel.getRangeAt(0)対象範囲が得られます

   startOffset endOffsetのと同じカーソル位置を表す、選択された領域の開始位置と終了位置を表します。

  anchorNodeテキストがテキストであり、ノードは、入力ボックスである、2つの値を有します。

  anchorNode入力ボックスのノードは、startOffsetは、テキストボックスの位置を表す場合、全体としてのテキストの一部は、唯一の場所、位置考えルックと等価です。

3. objRange.rangeCount目標範囲選択された領域の数表す
)4. sel.removeAllRangesを(選択された範囲の対象領域を除去することができます

5. document.createRange()新しい目標範囲を作成することができます

6. sel.addRange(範囲)が選択されたターゲットエリアの範囲に加えてもよいです

 

基本的な考え方:

編集可能なDIVがフォーカスを失ったときに、変数に割り当てられた時間範囲のオブジェクトで記録するlastRange

編集可能なDIVの回復が集中した場合、デフォルト範囲のオブジェクトがあるでしょう、startOffsetとendOffsetのは0です

使用sel.removeAllRanges()目標範囲の選択された領域を除去することができます

使用sel.addRange(lastRange)は、選択した領域に保存されたlastRangeオブジェクトを追加することができます

 

誰かの家と例の詳細な説明をします。https://segmentfault.com/a/1190000005869372

おすすめ

転載: www.cnblogs.com/BluceLee/p/12100026.html