TextRange物件的學習（一）
阿新 • • 發佈：2019-01-30
這兩天為了解決FCKeditor中貼上彈出“是否允許訪問剪貼簿的內容”時，無意中接觸到了DHTML中的TextRange這個物件（代表 HTML 元素中的文字），對程式碼很是不明白，才抽時間學習了這個，下面是我在網上找資料並且自己學習心得
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready( function(){ } ); function rdl_doSelect() { var oMessage = document.all("oMessage"); //在body標籤下面建立TextRange物件,含有htmlText和text兩個屬性，代表建立範圍內的文字內容 var oTextRange = document.body.createTextRange(); alert(oTextRange.htmlText);//彈出的資訊是body標籤內的所有內容包含html標籤 with(oTextRange) { moveToElementText(oMessage);//將oTextRange的返回限定在oMessage物件上，即id為oMessage的元件 //彈出的資訊為id為oMessage的元件的資訊內容，物件還是之前建立的oTextRange，只是改變了其範圍 alert(htmlText);//由於這裡使用了with,可以省略oTextRange，實際完整寫法是oTextRange.htmlText //表示在oTextRange物件的範圍內容進行全部選擇操作，這個命令可以檢視幫助文件，有很多，當然有些還是不支援的 execCommand("SelectAll"); } } function rdl_doClear() { //selection是document的一個物件，clear()表示要清除選中區的內容。 //因此不執行選中方法，則執行清楚方法效果是看不出來的，當然也可以用滑鼠執行選中操作。 document.selection.clear(); } </script> <title>無標題文件</title> </head> <body> <span id=oMessage>我是要被清除的資訊。</span> <br><br> <input type=button value=" 選擇 " onclick="rdl_doSelect();"> <input type=button value=" 清除 " onclick="rdl_doClear();"> </body> </html>
TextRange物件可以縮小自己的文字範圍，然後再執行一些命令，可以完成“介面操作”
<HTML> <HEAD> <TITLE>JavaScript--execCommand指令集</TITLE> <SCRIPT LANGUAGE="javascript"> <!-- /* *該function執行copy指令 */ function fn_doufucopy(){ edit.select(); document.execCommand('Copy'); } /* *該function執行paste指令 */ function fn_doufupaste() { tt.focus(); document.execCommand('paste'); } /* *該function用來建立一個超連結 */ function fn_creatlink() { document.execCommand('CreateLink',true,'true');//彈出一個對話方塊輸入URL //document.execCommand('CreateLink',false,'http://www.51js.com'); } /* *該function用來將選中的區塊設為指定的背景色 */ function fn_change_backcolor() { document.execCommand('BackColor',true,'#FFbbDD');//true或false都可以 } /* *該function用來將選中的區塊設為指定的前景色,改變選中區塊的字型大小,改變字型,字型變粗變斜 */ function fn_change_forecolor() { //指定前景色 document.execCommand('ForeColor',false,'#BBDDCC');//true或false都可以 //指定背景色 document.execCommand('FontSize',false,7); //true或false都可以 //字型必須是系統支援的字型 document.execCommand('FontName',false,'標楷體'); //true或false都可以 //字型變粗 document.execCommand('Bold'); //變斜體 document.execCommand('Italic'); } /* *該function用來將選中的區塊加上不同的線條 */ function fn_change_selection() { //將選中的文字加下劃線 document.execCommand('Underline'); //在選中的文字上劃粗線 document.execCommand('StrikeThrough'); //將選中的部分文字變細 document.execCommand('SuperScript'); //將選中區塊的下劃線取消掉 document.execCommand('Underline'); } /* *該function用來將選中的區塊排成不同的格式 */ function fn_format() { //有序列排列 document.execCommand('InsertOrderedList'); //實心無序列排列 document.execCommand('InsertUnorderedList'); //空心無序列排列 document.execCommand('Indent'); } /* *該function用來將選中的區塊剪下或是刪除掉 */ function fn_CutOrDel() { //刪除選中的區塊 //document.execCommand('Delete'); //剪下選中的區塊 document.execCommand('Cut'); } /* *該function用來將選中的區塊重設為一個相應的物件 */ function fn_InsObj() { /* ****************************************** * 以下指令都是為選中的區塊重設一個object; * 如沒有特殊說明,第二個引數true或false是一樣的; * 引數三表示為該object的id; * 可以用在javascript中通過其指定的id來控制它 ****************************************** */ /*重設為一個button(InsertButton和InsertInputButtong一樣, 只不前者是button,後者是input)*/ /*document.execCommand('InsertButton',false,"aa"); //true或false無效 document.all.aa.value="風舞九天";*/ //重設為一個fieldset /*document.execCommand('InsertFieldSet',true,"aa"); document.all.aa.innerText="刀劍如夢";*/ //插入一個水平線 //document.execCommand('InsertHorizontalRule',true,"aa"); //插入一個iframe //document.execCommand('InsertIFrame',true,"aa"); //插入一個InsertImage,設為true時需要圖片,false時不需圖片 //document.execCommand('InsertImage',false,"aa"); //插入一個checkbox //document.execCommand('InsertInputCheckbox',true,"aa"); //插入一個file型別的object //document.execCommand('InsertInputFileUpload',false,"aa"); //插入一個hidden /*document.execCommand('InsertInputHidden',false,"aa"); alert(document.all.aa.id);*/ //插入一個InputImage /*document.execCommand('InsertInputImage',false,"aa"); document.all.aa.src="F-a10.gif";*/ //插入一個Password //document.execCommand('InsertInputPassword',true,"aa"); //插入一個Radio //document.execCommand('InsertInputRadio',false,"aa"); //插入一個Reset //document.execCommand('InsertInputReset',true,"aa"); //插入一個Submit //document.execCommand('InsertInputSubmit',false,"aa"); //插入一個input text //document.execCommand('InsertInputText',false,"aa"); //插入一個textarea //document.execCommand('InsertTextArea',true,"aa"); //插入一個 select list box //document.execCommand('InsertSelectListbox',false,"aa"); //插入一個single select document.execCommand('InsertSelectDropdown',true,"aa"); //插入一個line break(硬回車??) //document.execCommand('InsertParagraph'); //插入一個marquee /*document.execCommand('InsertMarquee',true,"aa"); document.all.aa.innerText="bbbbb";*/ //用於取消選中的陰影部分 //document.execCommand('Unselect'); //選中頁面上的所有元素 //document.execCommand('SelectAll'); } /* *該function用來將頁面儲存為一個檔案 */ function fn_save() { //第二個引數為欲儲存的檔名 document.execCommand('SaveAs','mycodes.txt'); //列印整個頁面 //document.execCommand('print'); } --> </SCRIPT> </HEAD> <body> <input id="edit" value="範例" NAME="edit"><br> <button onclick="fn_doufucopy()" ID="Button1">Copy</button> <button onclick="fn_doufupaste()" ID="Button2"> paste</button><br> <textarea id="tt" rows="10" cols="50" NAME="tt"></textarea> <hr> <br> 浮沉聚散變化又再,但是總可捲土重來.<br> 天若有情天亦老,人間正道是滄桑.<br> 都怪我,太執著,卻也等不到花開葉落.<br> <br> Please select above letters, then click following buttons:<br> <hr> <input type="button" value="建立CreateLink" onclick="fn_creatlink()" ID="Button3" NAME="Button3"><br> <input type="button" value="改變文字背景色" onclick="fn_change_backcolor()" ID="Button4" NAME="Button4"><br> <input type="button" value="改變文字前景色" onclick="fn_change_forecolor()" ID="Button5" NAME="Button5"><br> <input type="button" value="給文字加線條" onclick="fn_change_selection()" ID="Button6" NAME="Button6"><br> <input type="button" value="改變文字的排列" onclick="fn_format()" ID="Button7" NAME="Button7"><br> <input type="button" value="刪除或剪下選中的部分" onclick="fn_CutOrDel()" ID="Button8" NAME="Button8"><br> <input type="button" value="插入Object" onclick="fn_InsObj()" ID="Button9" NAME="Button9"><br> <input type="button" value="儲存或列印檔案" onclick="fn_save()" ID="Button10" NAME="Button10"><br> <input type="button" value="測試Refresh屬性" onclick="document.execCommand('Refresh')" ID="Button11" NAME="Button11"> </body> </HTML>
選中需要修改的範圍，然後點選按鈕，就能改變頁面的內容——自己用滑鼠選擇範圍，很是有意思
備註：上面的程式碼只在IE中執行才能看到效果，查了相關的資料說是支援FF，但是目前還沒有測試成功，下次寫一個支援火狐的。