|
1.2D-Position 允許通過(guò)拖曳移動(dòng)絕對(duì)定位的對(duì)象 命令document.execCommand("2D-Position",false,true)能打開(kāi)文檔的 2D定位，當(dāng)容器的contentEditable標(biāo)記為true時(shí)，可以拖動(dòng)容器內(nèi)的控件、改變控件大小、編輯控件文本內(nèi)容。第3個(gè)參數(shù)設(shè)置為true 時(shí)可以拖動(dòng)元素，否則不能。 要注意：2D定位只對(duì)樣式設(shè)置為Position:absolute的元素有效 示例: <script>
document.execCommand("2D-Position",false,true); </script> <div contentEditable=true> <p style="background-color:silver;position:absolute">可移動(dòng)段落</p> <input type="button" value="可移動(dòng)按鈕" style="position:absolute"> </div> 2.BackColor 設(shè)置或獲取當(dāng)前選中區(qū)的背景顏色 示例: <script>
function bgcolor() { var rng = document.selection.createRange(); rng.execCommand(‘BackColor‘,‘false‘,‘silver‘); } </script> 亮少有逸群之才，英霸之器，身長(zhǎng)八尺，容貌甚偉，時(shí)人異焉。<br> <input type="button" value="選中部分文本后點(diǎn)擊" onClick="bgcolor()"> 3.Bold 切換當(dāng)前選中區(qū)的粗體 這個(gè)方法執(zhí)行后可以將指定文本設(shè)置為Bold，如果在已經(jīng)設(shè)置為Bold上再次執(zhí)行該命令，則可以取消Bold狀態(tài) 示例: <script>
function setBold() { var rng = document.selection.createRange(); rng.execCommand(‘Bold‘); } </script> 自董卓造逆以來(lái)，天下豪杰并起。曹操勢(shì)不及袁紹，而竟能克紹者，非惟天時(shí)，抑亦人謀也<br> <input type="button" value="選中部分文本后點(diǎn)擊" onClick="setBold()"> 4.Copy 將當(dāng)前選中區(qū)復(fù)制到剪貼板 示例: <script>
function copyText() { var rng = document.selection.createRange(); rng.execCommand(‘Copy‘); alert("當(dāng)前拷貝的文本是:"+rng.text); } </script> 今操已擁百萬(wàn)之眾，挾天子以令諸侯，此誠(chéng)不可與爭(zhēng)鋒。孫權(quán)據(jù)有江東，已歷三世，國(guó)險(xiǎn)而民附，此可用為援而不可圖也<br> <input type="button" value="拷貝" onClick="copyText()"> 5.CreateLink 在當(dāng)前選中區(qū)上插入超級(jí)鏈接，并顯示一個(gè)對(duì)話框讓用戶輸入U(xiǎn)RL 示例: <script>
function setLink() { var rng = document.selection.createRange(); if(rng.text!="") { rng.execCommand(‘CreateLink‘); if(confirm(‘在新窗口打開(kāi)鏈接嗎?‘)) { rng.parentElement().outerHTML = rng.parentElement().outerHTML.replace("<A","<A target=‘_blank‘ "); //這里要注意一定要使用賦值的方式，否則直接調(diào)用replace()函數(shù)，并不能改變?cè)兄怠Ｋ鼈兪遣煌母北?/span> } } } </script>
荊 州北據(jù)漢、沔，利盡南海，東連吳會(huì)，西通巴、蜀，此用武之地，非其主不能守；是殆天所以資將軍，將軍豈有意乎？益州險(xiǎn)塞，沃野千里，天府之國(guó)，高祖因之以 成帝業(yè)；今劉璋暗弱，民殷國(guó)富，而不知存恤，智能之士，思得明君。 <input type="button" value="創(chuàng)建鏈接" onClick="setLink();"> 6.Cut 在當(dāng)前選中區(qū)上執(zhí)行"剪切" 示例: <script>
function cutText() { var rng = document.selection.createRange(); rng.execCommand(‘Cut‘); } </script> 將軍既帝室之胄，信義著于四海，總攬英雄，思賢如渴，若跨有荊、益，保其巖阻，西和諸戎，南撫彝、越，外結(jié)孫權(quán) ，內(nèi)修政理；待天下有變，則命一上將將荊州之兵以向宛、洛，將軍身率益州之眾以出秦川，百姓有不簞食壺漿以迎將 軍者乎？ <input type="button" value="剪切" onClick="cutText()"><br> <input> 7.Delete 刪除當(dāng)前選中區(qū) 示例: <script>
function delText() { var rng = document.selection.createRange(); rng.execCommand(‘Delete‘); } </script> 誠(chéng)如是，則大業(yè)可成，漢室可興矣。此亮所以為將軍謀者也。惟將軍圖之 <input type="button" onClick="delText()" value="刪除所選文本"> 8.FontName 設(shè)置或獲取當(dāng)前選中區(qū)的字體 示例: <script>
function getFontName() { var rng = document.selection.createRange(); rng.execCommand(‘FontName‘,true,‘幼圓‘); var temp = rng.queryCommandValue(‘FontName‘); alert("你設(shè)置的字體是:"+temp); } </script> 言罷，命童子取出畫(huà)一軸，掛于中堂，指謂玄德曰：“此西川五十四州之圖也。將軍欲成霸業(yè)，北讓曹操占天時(shí)，南讓孫權(quán)占地利，將軍可占人和。 <input type="button" onClick="getFontName()" value="設(shè)置字體為幼圓"> 9.FontSize 設(shè)置或獲取當(dāng)前選中區(qū)的字體大小 這個(gè)命令接受的參數(shù)是1-7號(hào)字，超過(guò)7的參數(shù)也將被轉(zhuǎn)換成7號(hào)字來(lái)處理 示例: <script>
function setFontSize() { var rng = document.selection.createRange(); rng.execCommand(‘FontSize‘,true,‘11‘); var temp = rng.queryCommandValue(‘FontSize‘); alert("字體大小是:"+temp); } </script> 言罷，命童子取出畫(huà)一軸，掛于中堂，指謂玄德曰：“此西川五十四州之圖也。將軍欲成霸業(yè)，北讓曹操占天時(shí)，南讓孫權(quán)占地利，將軍可占人和。 <input type="button" onClick="setFontSize()" value="設(shè)置字體大小"> 10.ForeColor 設(shè)置或獲取選中區(qū)的前景(文本)顏色 其實(shí)也可以通過(guò)queryCommandValue()獲得顏色值，不過(guò)格式是10進(jìn)制數(shù)，需要的時(shí)候可以轉(zhuǎn)換成16進(jìn)值 示例: <script>
function setForeColor() { var rng = document.selection.createRange(); rng.execCommand(‘ForeColor‘,true,‘blue‘); var temp = rng.queryCommandValue(‘ForeColor‘); alert("顏色值:"+temp); } </script> 先取荊州為家，后即取西川建基業(yè)，以成鼎足之勢(shì)，然后可圖中原也 <input type="button" onClick="setForeColor()" value="設(shè)置前景色"> 11.FormatBlock 設(shè)置當(dāng)前塊格式化標(biāo)簽 示例: <script>
function formatBlock() { var rng = document.selection.createRange(); rng.execCommand(‘FormatBlock‘,false,‘<h2>‘); } </script> <p>段落一</p> <p>段落二</p> <input type="button" value="格式化為h2" onClick="formatBlock();"> 12.Indent 增加選中文本的縮進(jìn) 示例: <script>
function increaseIndent() { var rng = document.selection.createRange(); rng.execCommand(‘Indent‘); } </script> <p>自你走后心憔悴</p> <p>白色油桐風(fēng)中紛飛</p> <input type="button" onClick="increaseIndent();" value="增加所選文本縮進(jìn)"> 13.InsertButton 插入按鈕覆蓋當(dāng)前選中區(qū) 與此相同的還有一個(gè)命令I(lǐng)nsertInputButton，也是插入一個(gè)按鈕，不過(guò)InsertButton是<Button>標(biāo)簽，InsertInputButton是<input type="button">標(biāo)簽 示例: <script>
function insertButton() { var rng = document.selection.createRange(); rng.execCommand(‘InsertButton‘,false,‘btn‘); //rng.execCommand(‘InsertInputButton‘,false,‘btn‘); btn.value = "新插入的按鈕"; } </script> 權(quán)即見(jiàn)肅，與語(yǔ)甚悅之。眾賓罷退，肅亦辭出，乃獨(dú)引肅還，合榻對(duì)飲 <input type="button" value="插入按鈕" onClick="insertButton()"> 14.InsertInput系列 包括有InsertInputCheckbox(復(fù)選框控件)、InsertInputFileUpload(文件 上載控件)、InsertInputHidden(隱藏控件)、InsertInputImage(圖像控件)、InsertInputPassword (密碼控件)、InsertInputRadio(單選按鈕控件)、InsertInputReset(重置控件)、InsertInputSubmit (提交控件)、InsertInputText(文本框控件) 示例: <script language="javascript">
function insertInput(str) { var rng = document.selection.createRange(); switch(str) { case ‘Checkbox‘: rng.execCommand(‘InsertInputCheckbox‘,false,‘chkBox‘); chkBox.checked = true; break; case ‘FileUpload‘: rng.execCommand(‘InsertInputFileUpLoad‘,false,‘fileUp‘); break; case ‘Hidden‘: rng.execCommand(‘InsertInputHidden‘,false,‘hidd‘); hidd.value = "這是一個(gè)隱藏值"; alert(hidd.value); break; case ‘Image‘: rng.execCommand(‘InsertInputImage‘,false,‘img‘); img.src = "http://www.baidu.com/img/logo.gif"; break; case ‘Password‘: rng.execCommand(‘InsertInputPassword‘,false,‘pwd‘); break; case ‘Radio‘: rng.execCommand(‘InsertInputRadio‘,false,‘rbtn‘); rbtn.checked = true; break; case ‘Reset‘: rng.execCommand(‘InsertInputReset‘,false,‘reset‘); break; case ‘Submit‘: rng.execCommand(‘InsertInputSubmit‘,false,‘refer‘); refer.value = ‘提交按鈕‘; break; case ‘Text‘: rng.execCommand(‘InsertInputText‘,false,‘txt‘); txt.value = ‘一個(gè)文本框‘; break; } } </script> ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- <input type="button" value="插入復(fù)選框" onClick="insertInput(‘Checkbox‘)"><p> <input type="button" value="插入文件上載控件" onClick="insertInput(‘FileUpload‘)"><p> <input type="button" value="插入隱藏控件" onClick="insertInput(‘Hidden‘)"><p> <input type="button" value="插入圖像控件" onClick="insertInput(‘Image‘)"><p> <input type="button" value="插入密碼控件" onClick="insertInput(‘Password‘)"><p> <input type="button" value="插入單選框" onClick="insertInput(‘Radio‘)"><p> <input type="button" value="插入重置按鈕" onClick="insertInput(‘Reset‘)"><p> <input type="button" value="插入提交按鈕" onClick="insertInput(‘Submit‘)"><p> <input type="button" value="插入文本框" onClick="insertInput(‘Text‘)"><p> |
|
|
