document.execCommand()的用法小記

　　一、語法

　　execCommand方法是執行一個對當前文檔，當前選擇或者給出范圍的命令。處理Html數據時常用。

　　如下格式：document.execCommand(sCommand[,交互方式, 動態參數]) ，其中： 　　sCommand：為指令參數（如下例中的"2D-Position"）； 　　交互方式：參數如果是true的話將顯示對話框，如果為false的話，則不顯示對話框（下例中的"false"即表示不顯示對話框）； 　　

動態參數：一般為一可用值或屬性值（如下例中的"true"）。

例如：

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

　　二、參數說明

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

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

?

　　三、示例

　　例1：isNaN是測試是否為數值型 ，限制輸入只能為數值如：1981.121，允許最多有一個小數點?

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

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

Erik發現了一個簡單的解決辦法（針對IE7以下的IE有效，其實在IE7中已經修復了這個Bug） 程序代碼 程序代碼
document.execCommand(”BackgroundImageCache”, false, true);

今天閱讀Ext的源碼時發現Jack Slocum已經考慮到了這一點，在Ext.js中給出了他的實現，在其它Ajax框架中應該還沒有這種類似的代碼，從這一個細節上就能看出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){} }

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

?

轉載于:https://www.cnblogs.com/walle2014/p/3659996.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。