欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript Range對象跨瀏覽器常用操作第2/2頁

 更新時間：2009年10月08日 18:28:57   作者：  
最近在開發(fā)在線代碼編輯器的過程中頻繁接觸Range對象，由于跨瀏覽器的需求，使用到ie下TextRange對象和標準Dom Range對象。

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

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

這段代碼雖然實現(xiàn)插入了文本，但是光標位置卻在插入文本之前，因為“insertNode是在Range的開始位置插入一 個節(jié)點”，接下來我們實現(xiàn)光標的控制，這需要設置Range對象的位置，并更新Selection對象的Range，代碼如下：
例4：
Js代碼
復制代碼 代碼如下:

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);//設置末尾位置
rg.collapse(false);//合并范圍至末尾
selection.removeAllRanges();//清除range
selection.addRange(rg);//設置range

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

<!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;//取消瀏覽器默認動作 ie
var rg=f.selection.createRange();
rg.pasteHTML(strTab);
}else{
e.preventDefault();//取消瀏覽器默認動作
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);//設置末尾位置
rg.collapse(false);//合并范圍至末尾
selection.removeAllRanges();//清除range
selection.addRange(rg);//設置range
}
}
}
}
//-->
</SCRIPT>
<div id="ifram_div"></div>
</BODY>
</HTML>

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

相關文章

最新評論