可編輯div游標位置

2022-03-04 15:08:16 字數 778 閱讀 4898

參考:

mdn上提示這些api不穩定。應該是相容ie9+,谷歌,火狐

1. var sel = window.getselection()  變數sel是當前頁面被選中區域

2. var objrange = sel.getrangeat(0) 獲得選中區域的range物件

startoffset和endoffset代表了選中區域的起始位置和結束位置,相同時代表了游標位置

anchornode有2個值,乙個是輸入框節點,乙個是文字text。

anchornode為輸入框節點時,startoffset代表了在文字框中的位置,一段文字看成乙個整體相當於只佔乙個位置,乙個表情算乙個位置。

3. objrange.rangecount表示選中區域的range物件數量

4. sel.removeallranges()可以移除選中區域的range物件

5. document.createrange()可以建立新的range物件

6. sel.addrange(range)可以給選中區域新增range物件

基本思路:

當可編輯div失去焦點時,要記錄當時的range物件,賦值給乙個變數lastrange

當可編輯div重新獲得焦點,會有乙個預設range物件,startoffset和endoffset都為0

使用sel.removeallranges()可以移除選中區域的range物件

使用sel.addrange(lastrange)可以給選中區域新增當時儲存的lastrange物件

別人家的詳細解釋和示例:

可編輯DIV設定游標位置

平時我們使用文字框input,textarea時,我們有時候需要得到游標的位置或者說設定游標的位置.但是文字框有個不足,就是不能滿足我們插入或者其他的一些要求.所以有時候我們使用div來代替文字框.今天為了搞定設定di的游標位置.頭疼啊,終於可以了,記錄一下,網上資料不多.首先要讓div啟用編輯模式...

可編輯div在游標位置插入指定內容

在游標位置插入內容 insertcontent content let sel null if document.selection else 需注意 在谷歌瀏覽器下測試發現 document.execcommand inserhtml false 當使用這種方式插入html內容時,p標籤不見了,只...

div可編輯 可拖動

可編輯設定contenteditable屬性可以讓div程式設計可編輯狀態 2 可拖動 move draggable 使用jquery ui的draggable可以讓div變成可拖動狀態,但是如果兩個屬性同時應用就會出現可編輯功能失效的狀況。可編輯var divtitle move divtitle...