javascript Range對(duì)象跨瀏覽器常用操作

更新時(shí)間：2009年10月08日 18:28:57 作者：

最近在開(kāi)發(fā)在線代碼編輯器的過(guò)程中頻繁接觸Range對(duì)象，由于跨瀏覽器的需求，使用到ie下TextRange對(duì)象和標(biāo)準(zhǔn)Dom Range對(duì)象。

2.插入文本
TextRange插入文本
使用TextRang插入文本比較簡(jiǎn)單，直接調(diào)用pasteHTML()方法就可以直接插入html代碼。
Dom Range插入文本
使用Dom Range插入文本相對(duì)復(fù)雜一些，Dom Range對(duì)象使用insertNode()方法實(shí)現(xiàn)插入，但是insertNode是在Range的開(kāi)始位置插入一個(gè)節(jié)點(diǎn)，參數(shù)是一個(gè)節(jié)點(diǎn)而不是字符串，我們可以通過(guò)插入文本節(jié)點(diǎn)實(shí)現(xiàn)，如果使用document.createTextNode建立文本節(jié)點(diǎn)，文本中的HTML標(biāo)記會(huì)自動(dòng)轉(zhuǎn)換，但空格是個(gè)特例，并不會(huì)自動(dòng)轉(zhuǎn)換為 ,這使我在開(kāi)發(fā)代碼縮進(jìn)時(shí)很頭疼，最后解決的辦法，是使用Rang.createContextualFragment,這個(gè)方法雖然在文檔中沒(méi)有找到，但測(cè)試多個(gè)瀏覽器都支持此方法,此方法返回的是一個(gè)DocumentFragment對(duì)
象。以下是示例代碼：
例3：
Js代碼

復(fù)制代碼代碼如下:

 
var rg = window.getSelection().getRangeAt(0); 
var fragment = rg.createContextualFragment(str); 
rg.insertNode(fragment); 

這段代碼雖然實(shí)現(xiàn)插入了文本，但是光標(biāo)位置卻在插入文本之前，因?yàn)椤癷nsertNode是在Range的開(kāi)始位置插入一個(gè)節(jié)點(diǎn)”，接下來(lái)我們實(shí)現(xiàn)光標(biāo)的控制，這需要設(shè)置Range對(duì)象的位置，并更新Selection對(duì)象的Range，代碼如下：
例4：
Js代碼

復(fù)制代碼代碼如下:

 
var selection=window.getSelection(); 
var rg=selection.getRangeAt(0); 
var fragment = rg.createContextualFragment(str); 
var oLastNode = fragment.lastChild; //獲得DocumentFragment的末尾位置 
rg.insertNode(fragment); 
rg.setEndAfter(oLastNode);//設(shè)置末尾位置 
rg.collapse(false);//合并范圍至末尾 
selection.removeAllRanges();//清除range 
selection.addRange(rg);//設(shè)置range 

以下是一個(gè)代碼縮進(jìn)功能的部分代碼作為示例：按tab鍵時(shí)會(huì)在當(dāng)前位置，插入4個(gè)空格，解決在編輯時(shí)不能輸入tab的問(wèn)題。實(shí)際應(yīng)用中的功能包括多行縮進(jìn)和自動(dòng)縮進(jìn)。

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
</HEAD> 
<BODY> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
window.onload=function(){ 
var iframeContent=""; 
var divContent=""; 
var divChange=false; 
var iframeChange=false; 
var $=function(s){return document.getElementById(s);} 
$("ifram_div").innerHTML+='<div id="infoIframe">iframe</div><iframe id="youretextarea" style="height:200px;width:99%;" class="_editbox"></iframe>'; 
var fw=$("youretextarea").contentWindow; 
var f=fw.document; 
f.designMode = 'On'; 
f.contentEditable = true; 
f.open(); 
f.writeln('<html><style>p{margin:0px;padding:0px;}body{margin:0px;padding:0px;font:16/18px Arial;}</html>'); 
f.close(); 
if(f.attachEvent){ 
f.attachEvent("onkeydown",fun1); 
}else{ 
fw.addEventListener("keydown",fun1,true); 
} 
function fun1(e){ 
ee=e||window.event; 
var code=e.charCode||e.keyCode; 
var strTab="&nbsp;&nbsp;&nbsp;&nbsp;"; 
if(code==9){//tab鍵 
if(f.selection){//ie 
e.returnValue=false;//取消瀏覽器默認(rèn)動(dòng)作 ie 
var rg=f.selection.createRange(); 
rg.pasteHTML(strTab); 
}else{ 
e.preventDefault();//取消瀏覽器默認(rèn)動(dòng)作 
var selection=fw.getSelection(); 
var rg=selection.getRangeAt(0); 
var fragment = rg.createContextualFragment(strTab); 
var oLastNode = fragment.lastChild; //獲得DocumentFragment的末尾位置 
rg.insertNode(fragment); 
rg.setEndAfter(oLastNode);//設(shè)置末尾位置 
rg.collapse(false);//合并范圍至末尾 
selection.removeAllRanges();//清除range 
selection.addRange(rg);//設(shè)置range 
} 
} 
} 
} 
//--> 
</SCRIPT> 
<div id="ifram_div"></div> 
</BODY> 
</HTML> 

3.替換
綜合介紹的選擇和插入的方法可完成替換功能，TextRange比較簡(jiǎn)單pasteHTML方法會(huì)替換原來(lái)Range選中的文本，Dom Range的insertNode不會(huì)刪除原range選中內(nèi)容，需要調(diào)用deleteContents()方法先刪除選擇內(nèi)容。
以上介紹了使用Range對(duì)象常用的區(qū)域選擇、插入文本和替換操作，希望在大家開(kāi)發(fā)在線編輯器時(shí)有所幫助，粗略之處還請(qǐng)見(jiàn)諒。

您可能感興趣的文章: