詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表
execCommand方法是執(zhí)行一個(gè)對(duì)當(dāng)前文檔，當(dāng)前選擇或者給出范圍的命令。在HTML5中，execCommand是一個(gè)非常有用的命令，它可以用來執(zhí)行一些文本操作，例如插入文本、修改字體樣式、插入圖片等。execCommand可以通過JavaScript代碼來調(diào)用，使得開發(fā)者可以在網(wǎng)頁中實(shí)現(xiàn)一些復(fù)雜的文本操作。在HTML編輯器中這個(gè)命令用得很多，酷炫的強(qiáng)大功能。
一、execCommand的作用
execCommand命令可以用來執(zhí)行一些文本操作，例如：
1、插入文本：可以在文本框或富文本編輯器中插入文本內(nèi)容。
2、修改字體樣式：可以對(duì)選中的文本應(yīng)用不同的字體、字號(hào)、字形等樣式屬性。
3、插入圖片：可以在文本中插入圖片，并設(shè)置圖片的大小和位置。
4、修改文本格式：可以將選中的文本轉(zhuǎn)換為段落、標(biāo)題、列表等格式。
5、剪切、復(fù)制和粘貼：可以執(zhí)行剪切、復(fù)制和粘貼操作，將選中的文本或圖片復(fù)制到剪貼板中或從剪貼板中粘貼文本或圖片。
6、撤銷和重做：可以撤銷或重做之前的操作。
7、其他操作：還可以執(zhí)行一些其他的文本操作，例如設(shè)置文本的顏色、背景色等。
二、execCommand的用法
document.execCommand(sCommand,交互方式, 動(dòng)態(tài)參數(shù))
其中：sCommand為指令參數(shù)（如下例中的”2D-Position”），交互方式如果是true的話將顯示對(duì)話框，如果為false的話，則不顯示對(duì)話框（下例中的”false”即表示不顯示對(duì)話框），動(dòng)態(tài)參數(shù)一般為 —— 可用值或?qū)傩灾担ㄈ缦吕械?rdquo;true”）
例：document.execCommand("2D-Position","false","true");
三、指令參數(shù)列表
1. 2D-Position 允許通過拖曳移動(dòng)絕對(duì)定位的對(duì)象。
2. AbsolutePosition 設(shè)定元素的 position 屬性為“absolute”(絕對(duì))。
3. BackColor 設(shè)置或獲取當(dāng)前選中區(qū)的背景顏色。
4. BlockDirLTR 目前尚未支持。
5. BlockDirRTL 目前尚未支持。
6. Bold 切換當(dāng)前選中區(qū)的粗體顯示與否。
7. BrowseMode 目前尚未支持。
8. Copy 將當(dāng)前選中區(qū)復(fù)制到剪貼板。
9. CreateBookmark 創(chuàng)建一個(gè)書簽錨或獲取當(dāng)前選中區(qū)或插入點(diǎn)的書簽錨的名稱。
10.CreateLink 在當(dāng)前選中區(qū)上插入超級(jí)鏈接，或顯示一個(gè)對(duì)話框允許用戶指定要為當(dāng)前選中區(qū)插入的超級(jí)鏈接的 URL。
11.Cut 將當(dāng)前選中區(qū)復(fù)制到剪貼板并刪除之。
12.Delete 刪除當(dāng)前選中區(qū)。
13.DirLTR 目前尚未支持。
14.DirRTL 目前尚未支持。
15.EditMode 目前尚未支持。
16.FontName 設(shè)置或獲取當(dāng)前選中區(qū)的字體。
17.FontSize 設(shè)置或獲取當(dāng)前選中區(qū)的字體大小。
18.ForeColor 設(shè)置或獲取當(dāng)前選中區(qū)的前景(文本)顏色。
19.FormatBlock 設(shè)置當(dāng)前塊格式化標(biāo)簽。
20.Indent 增加選中文本的縮進(jìn)。
21.InlineDirLTR 目前尚未支持。
22.InlineDirRTL 目前尚未支持。
23.InsertButton 用按鈕控件覆蓋當(dāng)前選中區(qū)。
24.InsertFieldset 用方框覆蓋當(dāng)前選中區(qū)。
25.InsertHorizontalRule 用水平線覆蓋當(dāng)前選中區(qū)。
26.InsertIFrame 用內(nèi)嵌框架覆蓋當(dāng)前選中區(qū)。
27.InsertImage 用圖像覆蓋當(dāng)前選中區(qū)。
28.InsertInputButton 用按鈕控件覆蓋當(dāng)前選中區(qū)。
29.InsertInputCheckbox 用復(fù)選框控件覆蓋當(dāng)前選中區(qū)。
30.InsertInputFileUpload 用文件上載控件覆蓋當(dāng)前選中區(qū)。
31.InsertInputHidden 插入隱藏控件覆蓋當(dāng)前選中區(qū)。
32.InsertInputImage 用圖像控件覆蓋當(dāng)前選中區(qū)。
33.InsertInputPassword 用密碼控件覆蓋當(dāng)前選中區(qū)。
34.InsertInputRadio 用單選鈕控件覆蓋當(dāng)前選中區(qū)。
35.InsertInputReset 用重置控件覆蓋當(dāng)前選中區(qū)。
36.InsertInputSubmit 用提交控件覆蓋當(dāng)前選中區(qū)。
37.InsertInputText 用文本控件覆蓋當(dāng)前選中區(qū)。
38.InsertMarquee 用空字幕覆蓋當(dāng)前選中區(qū)。
39.InsertOrderedList 切換當(dāng)前選中區(qū)是編號(hào)列表還是常規(guī)格式化塊。
40.InsertParagraph 用換行覆蓋當(dāng)前選中區(qū)。
41.InsertSelectDropdown 用下拉框控件覆蓋當(dāng)前選中區(qū)。
42.InsertSelectListbox 用列表框控件覆蓋當(dāng)前選中區(qū)。
43.InsertTextArea 用多行文本輸入控件覆蓋當(dāng)前選中區(qū)。
44.InsertUnorderedList 切換當(dāng)前選中區(qū)是項(xiàng)目符號(hào)列表還是常規(guī)格式化塊。
45.Italic 切換當(dāng)前選中區(qū)斜體顯示與否。
46.JustifyCenter 將當(dāng)前選中區(qū)在所在格式化塊置中。
47.JustifyFull 目前尚未支持。
48.JustifyLeft 將當(dāng)前選中區(qū)所在格式化塊左對(duì)齊。
49.JustifyNone 目前尚未支持。
50.JustifyRight 將當(dāng)前選中區(qū)所在格式化塊右對(duì)齊。
51.LiveResize 迫使 MSHTML 編輯器在縮放或移動(dòng)過程中持續(xù)更新元素外觀，而不是只在移動(dòng)或縮放完成后更新。
52.MultipleSelection 允許當(dāng)用戶按住 Shift 或 Ctrl 鍵時(shí)一次選中多于一個(gè)站點(diǎn)可選元素。
53.Open 打開。
54.Outdent 減少選中區(qū)所在格式化塊的縮進(jìn)。
55.OverWrite 切換文本狀態(tài)的插入和覆蓋。
56.Paste 用剪貼板內(nèi)容覆蓋當(dāng)前選中區(qū)。
57.PlayImage 目前尚未支持。
58.Print 打開打印對(duì)話框以便用戶可以打印當(dāng)前頁。
59.Redo 重做。
60.Refresh 刷新當(dāng)前文檔。
61.RemoveFormat 從當(dāng)前選中區(qū)中刪除格式化標(biāo)簽。
62.RemoveParaFormat 目前尚未支持。
63.SaveAs 將當(dāng)前 Web 頁面保存為文件。
64.SelectAll 選中整個(gè)文檔。
65.SizeToControl 目前尚未支持。
66.SizeToControlHeight 目前尚未支持。
67.SizeToControlWidth 目前尚未支持。
68.Stop 停止。
69.StopImage 目前尚未支持。
70.StrikeThrough 目前尚未支持。
71.Subscript 目前尚未支持。
72.Superscript 目前尚未支持。
73.UnBookmark 從當(dāng)前選中區(qū)中刪除全部書簽。
74.Underline 切換當(dāng)前選中區(qū)的下劃線顯示與否。
75.Undo 撤消。
76.Unlink 從當(dāng)前選中區(qū)中刪除全部超級(jí)鏈接。
77.Unselect 清除當(dāng)前選中區(qū)的選中狀態(tài)。
四、使用示例
//相當(dāng)于單擊文件中的打開按鈕
document.execCommand("Open");
//將當(dāng)前頁面另存為
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)于單擊文件中的打開按鈕
document.execCommand("Open");
//將當(dāng)前頁面另存為
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);五、結(jié)論
到此這篇關(guān)于詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表的文章就介紹到這了,更多相關(guān)execCommand的用法及指令參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS實(shí)現(xiàn)簡單的二元方程計(jì)算器功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的二元方程計(jì)算器功能,涉及javascript數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
ES6提供了大量新的好的東西，在過去的一年內(nèi)，瀏覽器提供商做了大量的辛勤工作將新的語言特性更新到他們的瀏覽器中。盡管有重大的更新，很多小的語言更新另我眼前一亮，下面這篇文章主要介紹了關(guān)于ES6的六個(gè)小特性,需要的朋友可以參考下。2017-02-02
Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁的實(shí)例
下面小編就為大家?guī)硪黄猇ue2.0+ElementUI實(shí)現(xiàn)表格翻頁的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
clipboard.js在移動(dòng)端復(fù)制失敗的解決方法
最近在使用clipboard.js碰到的一個(gè)小問題，通過查找相關(guān)資料解決了，所以下面這篇文章主要給大家介紹了關(guān)于clipboard.js在移動(dòng)端復(fù)制失敗的解決方法，需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06
artDialog是一個(gè)基于javascript編寫的對(duì)話框組件，它擁有精致的界面與友好的接口。本文給大家介紹JS中artdialog彈出框控件之提交表單思路詳解，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2016-04-04
為什么用表單的方式就可以傳遞中文，而URL的方式就不行了呢？非得用URL傳值的方式才能解決問題嗎？這里我想到了動(dòng)態(tài)表單，何不用它來解決呢2013-04-04
js實(shí)現(xiàn)文章目錄索引導(dǎo)航(table of content)
這篇文章主要介紹了js實(shí)現(xiàn)文章目錄索引導(dǎo)航(table of content),需要的朋友可以參考下2020-05-05
JavaScript初學(xué)者應(yīng)注意的七個(gè)細(xì)節(jié)小結(jié)
每種語言都有它特別的地方，對(duì)于JavaScript來說，使用var就可以聲明任意類型的變量，這門腳本語言看起來很簡單，然而想要寫出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗(yàn)的2012-01-01
本文主要分享了canvas繪制表盤時(shí)鐘的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
在父頁面中訪問iframe中的各個(gè)元素與一般的訪問頁面元素?zé)o本質(zhì)區(qū)別，無非是需要在父頁面中事先獲取需要處理的iframe對(duì)象，在獲取iframe對(duì)象后，其操作基本沒什么特別之處。2009-07-07