快捷導(dǎo)航

javascript Range對象跨瀏覽器常用操作

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

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

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

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

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

這段代碼雖然實現(xiàn)插入了文本，但是光標(biāo)位置卻在插入文本之前，因為“insertNode是在Range的開始位置插入一個節(jié)點”，接下來我們實現(xiàn)光標(biāo)的控制，這需要設(shè)置Range對象的位置，并更新Selection對象的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 

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

復(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)動作 ie 
var rg=f.selection.createRange(); 
rg.pasteHTML(strTab); 
}else{ 
e.preventDefault();//取消瀏覽器默認(rèn)動作 
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比較簡單pasteHTML方法會替換原來Range選中的文本，Dom Range的insertNode不會刪除原range選中內(nèi)容，需要調(diào)用deleteContents()方法先刪除選擇內(nèi)容。
以上介紹了使用Range對象常用的區(qū)域選擇、插入文本和替換操作，希望在大家開發(fā)在線編輯器時有所幫助，粗略之處還請見諒。

您可能感興趣的文章: