document.execCommand()的用法小記

　　一、語(yǔ)法

　　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ū)傩灾?#xff08;如下例中的"true"）。

例如：

document.execCommand("2D-Position","false","true");

　　二、參數(shù)說(shuō)明

說(shuō)明：在firefox下支持不好，firefox需要三個(gè)參數(shù)寫全不能省略。
下面列出的是指令參數(shù)及意義

?指令參數(shù)(sCommand)	?意義
?2D-Position	?允許通過(guò)拖曳移動(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)過(guò)程中持續(xù)更新元素外觀，而不是只在移動(dòng)或縮放完成后更新。
?MultipleSelection	?允許當(dāng)用戶按住 Shift 或 Ctrl 鍵時(shí)一次選中多于一個(gè)站點(diǎn)可選元素。
?Open	?打開(kāi)。
?Outdent	?減少選中區(qū)所在格式化塊的縮進(jìn)。
?OverWrite	?切換文本狀態(tài)的插入和覆蓋。
?Paste	?用剪貼板內(nèi)容覆蓋當(dāng)前選中區(qū)。
?PlayImage	? 目前尚未支持。
?Print	?打開(kāi)打印對(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)。

?

　　三、示例

　　例1：isNaN是測(cè)試是否為數(shù)值型 ，限制輸入只能為數(shù)值如：1981.121，允許最多有一個(gè)小數(shù)點(diǎn)?

?<input type="text" name="text" οnkeyup="if(isNaN(value))execCommand('undo')" />

?

???

　　例2：?

<input type=button value=剪切 οnclick=document.execCommand('Cut')> <input type=button value=拷貝 οnclick=document.execCommand('Copy')> <input type=button value=粘貼 οnclick=document.execCommand('Paste')> <input type=button value=撤消 οnclick=document.execCommand('Undo')> <input type=button value=重做 οnclick=document.execCommand('Redo') id=button2 name=button2> <input> <input type=button value=刪除 οnclick=document.execCommand('Delete')> <input type=button value=黑體 οnclick=document.execCommand('Bold')> <input type=button value=斜體 οnclick=document.execCommand('Italic')> <input type=button value=下劃線 οnclick=document.execCommand('Underline')> <input type=button value=停止 οnclick=document.execCommand('stop')> <input type=button value=保存 οnclick=document.execCommand('SaveAs')> <input type=button value=另存為 οnclick=document.execCommand('Saveas',false,'c:\\test.htm')> <input type=button value=字體 οnclick=document.execCommand('FontName',false,fn)> <input type=button value=字體大小 οnclick=document.execCommand('FontSize',false,fs)> <input type=button value=刷新 οnclick=document.execCommand('refresh',false,0)>

?

?

使用的例子如下:
1、〖全選〗命令的實(shí)現(xiàn) [格式]:document.execCommand(”selectAll”)
[說(shuō)明]將選種網(wǎng)頁(yè)中的全部?jī)?nèi)容！ [舉例]在之間加入： 全選
2、〖打開(kāi)〗命令的實(shí)現(xiàn)
[格式]:document.execCommand(”open”)
[說(shuō)明]這跟VB等編程設(shè)計(jì)中的webbrowser控件中的命令有些相似，大家也可依此琢磨琢磨。 [舉例]在之間加入： 打開(kāi)
3、〖另存為〗命令的實(shí)現(xiàn) [格式]:document.execCommand(”saveAs”)
[說(shuō)明]將該網(wǎng)頁(yè)保存到本地盤的其它目錄！ [舉例]在之間加入： 另存為
4、〖打印〗命令的實(shí)現(xiàn)
[格式]:document.execCommand(”print”) [說(shuō)明]當(dāng)然，你必須裝了打印機(jī)！ [舉例]在之間加入：
打印
Js代碼 下面列出的是指令參數(shù)及意義
//相當(dāng)于單擊文件中的打開(kāi)按鈕
document.execCommand(”O(jiān)pen”);
//將當(dāng)前頁(yè)面另存為
document.execCommand(”SaveAs”);
//剪貼選中的文字到剪貼板;
document.execCommand(”Cut”,”false”,null);
//刪除選中的文字;
document.execCommand(”Delete”,”false”,null);
//改變選中區(qū)域的字體;
document.execCommand(”FontName”,”false”,sFontName);
//改變選中區(qū)域的字體大小;
document.execCommand(”FontSize”,”false”,sSize|iSize);
//設(shè)置前景顏色;
document.execCommand(”ForeColor”,”false”,sColor);
//使絕對(duì)定位的對(duì)象可直接拖動(dòng);
document.execCommand(”2D-Position”,”false”,”true”);
//使對(duì)象定位變成絕對(duì)定位;
document.execCommand(”AbsolutePosition”,”false”,”true”);
//設(shè)置背景顏色;
document.execCommand(”BackColor”,”false”,sColor);
//使選中區(qū)域的文字加粗;
document.execCommand(”Bold”,”false”,null);
//復(fù)制選中的文字到剪貼板;
document.execCommand(”Copy”,”false”,null);
//設(shè)置指定錨點(diǎn)為書簽;
document.execCommand(”CreateBookmark”,”false”,sAnchorName);
//將選中文本變成超連接,若第二個(gè)參數(shù)為true,會(huì)出現(xiàn)參數(shù)設(shè)置對(duì)話框;
document.execCommand(”CreateLink”,”false”,sLinkURL);
//設(shè)置當(dāng)前塊的標(biāo)簽名;
document.execCommand(”FormatBlock”,”false”,sTagName);
//相當(dāng)于單擊文件中的打開(kāi)按鈕 document.execCommand(”O(jiān)pen”);
//將當(dāng)前頁(yè)面另存為
document.execCommand(”SaveAs”);
//剪貼選中的文字到剪貼板;
document.execCommand(”Cut”,”false”,null);
//刪除選中的文字;
document.execCommand(”Delete”,”false”,null);
//改變選中區(qū)域的字體;
document.execCommand(”FontName”,”false”,sFontName);
//改變選中區(qū)域的字體大小;
document.execCommand(”FontSize”,”false”,sSize|iSize);
//設(shè)置前景顏色;
document.execCommand(”ForeColor”,”false”,sColor);
//使絕對(duì)定位的對(duì)象可直接拖動(dòng);
document.execCommand(”2D-Position”,”false”,”true”);
//使對(duì)象定位變成絕對(duì)定位;
document.execCommand(”AbsolutePosition”,”false”,”true”);
//設(shè)置背景顏色;
document.execCommand(”BackColor”,”false”,sColor);
//使選中區(qū)域的文字加粗;
document.execCommand(”Bold”,”false”,null);
//復(fù)制選中的文字到剪貼板;
document.execCommand(”Copy”,”false”,null);
//設(shè)置指定錨點(diǎn)為書簽;
document.execCommand(”CreateBookmark”,”false”,sAnchorName);
//將選中文本變成超連接,若第二個(gè)參數(shù)為true,會(huì)出現(xiàn)參數(shù)設(shè)置對(duì)話框;
document.execCommand(”CreateLink”,”false”,sLinkURL);
//設(shè)置當(dāng)前塊的標(biāo)簽名;
document.execCommand(”FormatBlock”,”false”,sTagName);

關(guān)于document.execCommand： 要執(zhí)行編輯命令，可調(diào)用 document.execCommand，并傳遞對(duì)應(yīng)于命令 ID 的字符串。另外還有可選的第二個(gè)參數(shù)，該參數(shù)指定如果可以應(yīng)用的話是否顯示此命令的用戶界面。傳遞整數(shù) 1 將顯示用戶界面，整數(shù) 0 將跳過(guò)它。這個(gè)參數(shù)通常不用于編輯命令。因?yàn)槟J(rèn)值為 0，所以假如您沒(méi)有使用第三個(gè)參數(shù)（在這種情況下，還必須為第二個(gè)參數(shù)傳遞值），一般可以不管它。第三個(gè)參數(shù)也是可選的，在可應(yīng)用的情況下，使用它來(lái)將任何所需參數(shù)傳遞給該命令。
Pixy方法受到IE的cache bug影響會(huì)閃爍。其實(shí)并沒(méi)有說(shuō)清楚這個(gè)問(wèn)題，但其實(shí)該bug是有條件的，即IE的cache設(shè)置為Every visit to the page，而不是默認(rèn)的Automatically。基本上，只有開(kāi)發(fā)者才會(huì)把cache設(shè)置為每次訪問(wèn)檢查更新，所以這個(gè)bug其實(shí)不會(huì)影響真正的用戶（根據(jù)在winxpsp2的ie6下測(cè)試，雖然可能仍然調(diào)用了一次網(wǎng)絡(luò)存取的api，但是并沒(méi)有發(fā)生實(shí)際的請(qǐng)求，癥狀就是鼠標(biāo)有極短時(shí)間的抖動(dòng)，但是圖像不會(huì)閃爍）。此外有人發(fā)現(xiàn)了一個(gè)未公開(kāi)的方法來(lái)讓IE對(duì)背景圖進(jìn)行緩存：
document.execCommand(”BackgroundImageCache”,false,true)
用這種方法甚至避免了api調(diào)用，貌似是直接緩存在IE內(nèi)存中。
IE6下設(shè)置背景圖片是不會(huì)被真正cache住的，就算服務(wù)器做了cache，如果想cache住只能~~~
做過(guò)UI設(shè)計(jì)和開(kāi)發(fā)的人一定知道，IE(不包括IE7)會(huì)經(jīng)常從服務(wù)器端重新載入背景圖片，好端端的UI界面在IE(不包括IE7)中就這樣被折騰著……

Erik發(fā)現(xiàn)了一個(gè)簡(jiǎn)單的解決辦法（針對(duì)IE7以下的IE有效，其實(shí)在IE7中已經(jīng)修復(fù)了這個(gè)Bug） 程序代碼 程序代碼
document.execCommand(”BackgroundImageCache”, false, true);

今天閱讀Ext的源碼時(shí)發(fā)現(xiàn)Jack Slocum已經(jīng)考慮到了這一點(diǎn)，在Ext.js中給出了他的實(shí)現(xiàn)，在其它Ajax框架中應(yīng)該還沒(méi)有這種類似的代碼，從這一個(gè)細(xì)節(jié)上就能看出Ext的全面～
程序代碼 程序代碼
var isIE = ua.indexOf(”msie”) > -1, isIE7 = ua.indexOf(”msie 7″) > -1; // remove css image flicker if(isIE && !isIE7){ try{ document.execCommand(”BackgroundImageCache”, false, true); }catch(e){} }

針對(duì)IE的背景緩存進(jìn)行了修復(fù)，只是IE7中已經(jīng)不存在這個(gè)現(xiàn)象了
程序代碼 程序代碼
window.isIE=navigator.appName.indexOf(”Microsoft”)==0;
if(isIE){ document.documentElement.addBehavior(”#default#userdata”);
document.execCommand(”BackgroundImageCache”,false,true);

?

轉(zhuǎn)載于:https://www.cnblogs.com/walle2014/p/3659996.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript：document.execCommand()的用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。