JavaScript 中在光標處插入添加文本標簽節點 詳細方法 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

正確的方法是正確運用Selection對象和Range對象,實現在光標當前位置插入文本或結點。但是這兩個對象在IE和標準的DOM方式的運用方法是不同的。 

思路:首先獲得用戶的選區(光標當前位置可理解成起始和終止位置一樣的選區)。然後,從Selection對象轉成Range對象。目的是利用Range對象的方法插內容進去。最後,插入動作結束後將光標移到插入內容的後面。

01
var sel = win.document.selection; //IE
02
var sel = win.getSelection(); //DOM
03
 
04
var range = sel.createRange(); // IE下
05
var range = sel.getRangeAt(0); // DOM下
06
 
07
if(range.startContainer){ // DOM下
08
    sel.removeAllRanges(); // 刪除Selection中的所有Range
09
    range.deleteContents(); // 清除Range中的內容
10
    // 獲得Range中的第一個html結點
11
    var container = range.startContainer;
12
    // 獲得Range起點的位移
13
    var pos = range.startOffset;
14
    // 建一個空Range
15
    range = document.createRange();
16
    // 插入內容
17
    var cons = win.document.createTextNode(",:),");
18
    
19
    if(container.nodeType == 3){// 如是一個TextNode
20
        container.insertData(pos, cons.nodeValue);
21
        // 改變光標位置
22
        range.setEnd(container, pos + cons.nodeValue.length);
23
        range.setStart(container, pos + cons.nodeValue.length);
24
    }else{// 如果是一個HTML Node
25
        var afternode = container.childNodes[pos];
26
        container.insertBefore(cons, afternode);
27
        
28
        range.setEnd(cons, cons.nodeValue.length);
29
        range.setStart(cons, cons.nodeValue.length);
30
    }
31
    sel.addRange(range);
32
}else{// IE下
33
    var cnode = range.parentElement();
34
    while(cnode.tagName.toLowerCase() != “body”){
35
        cnode = cnode.parentNode;
36
    }
37
    if(cnode.id && cnode.id==”rich_txt_editor”){
38
        range.pasteHTML(",:),");
39
    }
40
}
41
win.focus();
innerHTML 和 pasteHTML 區別  
innerHTML 是一個屬性,可以取得或者設定該元素內的 HTML 內容,可以是任意能包含 HTML 子節點的元素都使用它 

pasteHTML()是一個方法,在指定的文字區域內替換該區域內的文本或者HTML,該方法必須應用於一個 createTextRange() 或者 document.selection.createRange() 創建的區域上

1
var oRange = document.selection.createRange();
2
        if(oRange.text!=''){
3
            var oHtml = '<a href="#" target=_blank>oRange.text</a>';
4
            oRange.pasteHTML(oHtml);
5
        }

摘自 JSON

發佈留言