參考:
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...