亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2009年10月08日 18:28:57   作者:  
最近在開(kāi)發(fā)在線(xiàn)代碼編輯器的過(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ā)在線(xiàn)編輯器時(shí)有所幫助,粗略之處還請(qǐng)見(jiàn)諒。

相關(guān)文章

最新評(píng)論