JavaScript execCommand函數(shù)

2022-02-11 14:49 更新

execCommand函數(shù)命令

execCommand方法是執(zhí)行一個(gè)對(duì)當(dāng)前文檔，當(dāng)前選擇或者給出范圍的命令。處理Html數(shù)據(jù)時(shí)常用
如下格式：document.execCommand(sCommand[,交互方式, 動(dòng)態(tài)參數(shù)]) ，其中：sCommand為指令參數(shù)（如下例中的”2D-Position”），交互方式參數(shù)如果是true的話將顯示對(duì)話框，如果為false的話，則不顯示對(duì)話框（下例中的”false”即表示不顯示對(duì)話框），動(dòng)態(tài)參數(shù)一般為一可用值或?qū)傩灾担ㄈ缦吕械摹眛rue”）。

document.execCommand("2D-Position","false","true");
下面列出的是指令參數(shù)及意義

2D-Position 允許通過拖曳移動(dòng)絕對(duì)定位的對(duì)象。
AbsolutePosition 設(shè)定元素的 position 屬性為“absolute”(絕對(duì))。
BackColor 設(shè)置或獲取當(dāng)前選中區(qū)的背景顏色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切換當(dāng)前選中區(qū)的粗體顯示與否。
BrowseMode 目前尚未支持。
Copy 將當(dāng)前選中區(qū)復(fù)制到剪貼板。
CreateBookmark 創(chuàng)建一個(gè)書簽錨或獲取當(dāng)前選中區(qū)或插入點(diǎn)的書簽錨的名稱。
CreateLink 在當(dāng)前選中區(qū)上插入超級(jí)鏈接，或顯示一個(gè)對(duì)話框允許用戶指定要為當(dāng)前選中區(qū)插入的超級(jí)鏈接的 URL。
Cut 將當(dāng)前選中區(qū)復(fù)制到剪貼板并刪除之。
Delete 刪除當(dāng)前選中區(qū)。
DirLTR 目前尚未支持。
DirRTL 目前尚未支持。
EditMode 目前尚未支持。
FontName 設(shè)置或獲取當(dāng)前選中區(qū)的字體。
FontSize 設(shè)置或獲取當(dāng)前選中區(qū)的字體大小。
ForeColor 設(shè)置或獲取當(dāng)前選中區(qū)的前景(文本)顏色。
FormatBlock 設(shè)置當(dāng)前塊格式化標(biāo)簽。
Indent 增加選中文本的縮進(jìn)。
InlineDirLTR 目前尚未支持。
InlineDirRTL 目前尚未支持。
InsertButton 用按鈕控件覆蓋當(dāng)前選中區(qū)。
InsertFieldset 用方框覆蓋當(dāng)前選中區(qū)。
InsertHorizontalRule 用水平線覆蓋當(dāng)前選中區(qū)。
InsertIFrame 用內(nèi)嵌框架覆蓋當(dāng)前選中區(qū)。
InsertImage 用圖像覆蓋當(dāng)前選中區(qū)。
InsertInputButton 用按鈕控件覆蓋當(dāng)前選中區(qū)。
InsertInputCheckbox 用復(fù)選框控件覆蓋當(dāng)前選中區(qū)。
InsertInputFileUpload 用文件上載控件覆蓋當(dāng)前選中區(qū)。
InsertInputHidden 插入隱藏控件覆蓋當(dāng)前選中區(qū)。
InsertInputImage 用圖像控件覆蓋當(dāng)前選中區(qū)。
InsertInputPassword 用密碼控件覆蓋當(dāng)前選中區(qū)。
InsertInputRadio 用單選鈕控件覆蓋當(dāng)前選中區(qū)。
InsertInputReset 用重置控件覆蓋當(dāng)前選中區(qū)。
InsertInputSubmit 用提交控件覆蓋當(dāng)前選中區(qū)。
InsertInputText 用文本控件覆蓋當(dāng)前選中區(qū)。
InsertMarquee 用空字幕覆蓋當(dāng)前選中區(qū)。
InsertOrderedList 切換當(dāng)前選中區(qū)是編號(hào)列表還是常規(guī)格式化塊。
InsertParagraph 用換行覆蓋當(dāng)前選中區(qū)。
InsertSelectDropdown 用下拉框控件覆蓋當(dāng)前選中區(qū)。
InsertSelectListbox 用列表框控件覆蓋當(dāng)前選中區(qū)。
InsertTextArea 用多行文本輸入控件覆蓋當(dāng)前選中區(qū)。
InsertUnorderedList 切換當(dāng)前選中區(qū)是項(xiàng)目符號(hào)列表還是常規(guī)格式化塊。
Italic 切換當(dāng)前選中區(qū)斜體顯示與否。
JustifyCenter 將當(dāng)前選中區(qū)在所在格式化塊置中。
JustifyFull 目前尚未支持。
JustifyLeft 將當(dāng)前選中區(qū)所在格式化塊左對(duì)齊。
JustifyNone 目前尚未支持。
JustifyRight 將當(dāng)前選中區(qū)所在格式化塊右對(duì)齊。
LiveResize 迫使 MSHTML 編輯器在縮放或移動(dòng)過程中持續(xù)更新元素外觀，而不是只在移動(dòng)或縮放完成后更新。
MultipleSelection 允許當(dāng)用戶按住 Shift 或 Ctrl 鍵時(shí)一次選中多于一個(gè)站點(diǎn)可選元素。
Open 目前尚未支持。
Outdent 減少選中區(qū)所在格式化塊的縮進(jìn)。
OverWrite 切換文本狀態(tài)的插入和覆蓋。
Paste 用剪貼板內(nèi)容覆蓋當(dāng)前選中區(qū)。
PlayImage 目前尚未支持。
Print 打開打印對(duì)話框以便用戶可以打印當(dāng)前頁(yè)。
Redo 目前尚未支持。
Refresh 刷新當(dāng)前文檔。
RemoveFormat 從當(dāng)前選中區(qū)中刪除格式化標(biāo)簽。
RemoveParaFormat 目前尚未支持。
SaveAs 將當(dāng)前 Web 頁(yè)面保存為文件。
SelectAll 選中整個(gè)文檔。
SizeToControl 目前尚未支持。
SizeToControlHeight 目前尚未支持。
SizeToControlWidth 目前尚未支持。
Stop 目前尚未支持。
StopImage 目前尚未支持。
StrikeThrough 目前尚未支持。
Subscript 目前尚未支持。
Superscript 目前尚未支持。
UnBookmark 從當(dāng)前選中區(qū)中刪除全部書簽。
Underline 切換當(dāng)前選中區(qū)的下劃線顯示與否。
Undo 目前尚未支持。
Unlink 從當(dāng)前選中區(qū)中刪除全部超級(jí)鏈接。
Unselect 清除當(dāng)前選中區(qū)的選中狀態(tài)。

document.ExecCommand() – html實(shí)例

<HTML>
     <HEAD>
         <TITLE>JavaScript--execCommand指令集</TITLE>
<SCRIPT LANGUAGE="javascript">
//該function執(zhí)行copy指令
function fn_doufucopy(){
    edit.select();
    document.execCommand('Copy');
}

//該function執(zhí)行paste指令
function fn_doufupaste() { 
    tt.focus();
    document.execCommand('paste');
} 

//該function用來(lái)創(chuàng)建一個(gè)超鏈接
function fn_creatlink(){
    document.execCommand('CreateLink',true,'true');//彈出一個(gè)對(duì)話框輸入U(xiǎn)RL
    //document.execCommand('CreateLink',false,'http://hgci.cn');
}

//該function用來(lái)將選中的區(qū)塊設(shè)為指定的背景色
function fn_change_backcolor(){
    document.execCommand('BackColor',true,'#FFbbDD');//true或false都可以
}

//該function用來(lái)將選中的區(qū)塊設(shè)為指定的前景色,改變選中區(qū)塊的字體大小,改變字體,字體變粗變斜
function fn_change_forecolor(){
    //指定前景色
    document.execCommand('ForeColor',false,'#BBDDCC');//true或false都可以
    //指定背景色
    document.execCommand('FontSize',false,7);   //true或false都可以
    //字體必須是系統(tǒng)支持的字體
    document.execCommand('FontName',false,'標(biāo)楷體');   //true或false都可以
    //字體變粗
    document.execCommand('Bold');
    //變斜體
    document.execCommand('Italic');
}

//該function用來(lái)將選中的區(qū)塊加上不同的線條
function fn_change_selection(){
    //將選中的文字加下劃線
    document.execCommand('Underline');
    //在選中的文字上劃粗線
    document.execCommand('StrikeThrough');
    //將選中的部分文字變細(xì)
    document.execCommand('SuperScript');
    //將選中區(qū)塊的下劃線取消掉
    document.execCommand('Underline'); 
}

//該function用來(lái)將選中的區(qū)塊排成不同的格式
function fn_format(){
    //有序列表
    document.execCommand('InsertOrderedList');
    //實(shí)心無(wú)序列表
    document.execCommand('InsertUnorderedList');
    //空心無(wú)序列表
    document.execCommand('Indent');
}

//該function用來(lái)將選中的區(qū)塊剪下或是刪除掉
function fn_CutOrDel(){
    //刪除選中的區(qū)塊
    //document.execCommand('Delete');
    //剪下選中的區(qū)塊
    document.execCommand('Cut');
}

//該function用來(lái)將選中的區(qū)塊重設(shè)為一個(gè)相應(yīng)的物件
function fn_InsObj(){
/*
  ******************************************
  * 以下指令都是為選中的區(qū)塊重設(shè)一個(gè)object;
  * 如沒有特殊說明,第二個(gè)參數(shù)true或false是一樣的;
  * 參數(shù)三表示為該object的id;
  * 可以用在javascript中通過其指定的id來(lái)控制它
  ******************************************
*/
/*重設(shè)為一個(gè)button(InsertButton和InsertInputButtong一樣,
只不前者是button,后者是input)*/
    /*document.execCommand('InsertButton',false,"aa"); //true或false無(wú)效
    document.all.aa.value="風(fēng)舞九天";*/
    //重設(shè)為一個(gè)fieldset
    /*document.execCommand('InsertFieldSet',true,"aa");
    document.all.aa.innerText="刀劍如夢(mèng)";*/
    //插入一個(gè)水平線
    //document.execCommand('InsertHorizontalRule',true,"aa");
    //插入一個(gè)iframe
    //document.execCommand('InsertIFrame',true,"aa");
    //插入一個(gè)InsertImage,設(shè)為true時(shí)需要圖片,false時(shí)不需圖片
    //document.execCommand('InsertImage',false,"aa");
    //插入一個(gè)checkbox
    //document.execCommand('InsertInputCheckbox',true,"aa");
    //插入一個(gè)file類型的object
    //document.execCommand('InsertInputFileUpload',false,"aa");
    //插入一個(gè)hidden
    /*document.execCommand('InsertInputHidden',false,"aa");
    alert(document.all.aa.id);*/
    //插入一個(gè)InputImage
    /*document.execCommand('InsertInputImage',false,"aa");
    document.all.aa.src="F-a10.gif";*/
    //插入一個(gè)Password
    //document.execCommand('InsertInputPassword',true,"aa");
    //插入一個(gè)Radio
    //document.execCommand('InsertInputRadio',false,"aa");
    //插入一個(gè)Reset
    //document.execCommand('InsertInputReset',true,"aa");
    //插入一個(gè)Submit
    //document.execCommand('InsertInputSubmit',false,"aa");
    //插入一個(gè)input text
    //document.execCommand('InsertInputText',false,"aa");
    //插入一個(gè)textarea
    //document.execCommand('InsertTextArea',true,"aa");
    //插入一個(gè) select list box
    //document.execCommand('InsertSelectListbox',false,"aa");
    //插入一個(gè)single select
    document.execCommand('InsertSelectDropdown',true,"aa");
    //插入一個(gè)line break(硬回車??)
    //document.execCommand('InsertParagraph');
    //插入一個(gè)marquee
    /*document.execCommand('InsertMarquee',true,"aa");
    document.all.aa.innerText="bbbbb";*/
    //用于取消選中的陰影部分
    //document.execCommand('Unselect');
    //選中頁(yè)面上的所有元素
    //document.execCommand('SelectAll');
}

//該function用來(lái)將頁(yè)面保存為一個(gè)文件
function fn_save(){
    //第二個(gè)參數(shù)為欲保存的文件名
    document.execCommand('SaveAs','mycodes.txt');
    //打印整個(gè)頁(yè)面
    //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>
         浮沉聚散變化又再,但是總可卷土重來(lái).<br>
         天若有情天亦老,人間正道是滄桑.<br>
         都怪我,太執(zhí)著,卻也等不到花開葉落.<br>
         <br>
         Please select above letters, then click following buttons:<br>
         <hr>
         <input type="button" value="創(chuàng)建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="測(cè)試Refresh屬性" onclick="document.execCommand('Refresh')" ID="Button11" NAME="Button11">
     </body>
</HTML>


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)