可編輯DIV設置光標位置.

平時我們使用文本框input, textarea時，我們有時候需要得到光標的位置或者說設置光標的位置.

但是文本框有個不足，就是不能滿足我們插入圖片或者其他的一些要求.

所以有時候我們使用div來代替文本框.

今天為了搞定設置DI的光標位置.頭疼啊，終於可以了，記錄一下，網上資料不多.

 

首先要讓DIV啟用編輯模式.

<div contenteditable=true id="divTest"></div>

通過設定contenteditable=true開啟div的編輯模式.這樣DIV就可以跟文本框一樣輸入內容了。

不扯話題了。下面說怎么獲取或設置光標位置.

2個步驟

1：獲取DIV中的光標位置

2：改變光標位置

 

var cursor = 0; // 光標位置  
document.onselectionchange = function () {
            var range = document.selection.createRange();
            var srcele = range.parentElement();//獲取到當前元素
         var copy = document.body.createTextRange();
            copy.moveToElementText(srcele);

            for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; cursor++) {
                copy.moveStart("character", 1);//改變光標位置，實際上我們是在記錄cursor的數量.
            }
        }  

給document綁定光標變化事件。用來記錄光標位置.

這樣就可以拿到DIV的光標位置了.

function moveEnd(obj) {

      lyTXT1.focus();
      var r = document.selection.createRange();
       //因為這里死從當前光標開始移動的(好像文本框的是從0算起.)所以我們需要拿到當前光標位置，然后就可以計算出要移動多少位了，這樣就可以把光標移動到想要的位置了
    r.moveStart('character', lyTXT1.innerText.length - cursor);
     r.collapse(true);
     r.select();
}

通過上面的我們就可以將DIV中的光標移動到最后面了..