詳解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)文章
原生javascript實(shí)現(xiàn)圖片無縫滾動(dòng)效果
這篇文章主要介紹了原生javascript實(shí)現(xiàn)圖片無縫滾動(dòng)效果的相關(guān)資料,需要的朋友可以參考下2016-02-02
JS中自定義定時(shí)器讓它在某一時(shí)刻執(zhí)行
寫一個(gè)方法，讓它在某一時(shí)刻執(zhí)行，即需要在JS中寫一個(gè)定時(shí)器，當(dāng)時(shí)間達(dá)到要求時(shí)間時(shí)，需要執(zhí)行的方法自動(dòng)執(zhí)行，下面的示例大家可以參考下2014-09-09
js css 實(shí)現(xiàn)遮罩層覆蓋其他頁面元素附圖
實(shí)現(xiàn)遮罩層的方法有很多，但大多都是使用js css來實(shí)現(xiàn)的，本例也實(shí)現(xiàn)一個(gè)，效果還不錯(cuò)，喜歡的朋友可以感受下2014-09-09
JS中的惰性函數(shù)（Lazy Function）其實(shí)是一種非常巧妙的性能優(yōu)化設(shè)計(jì)模式,就是利用js的動(dòng)態(tài)重寫函數(shù)的思想,用第一次調(diào)用時(shí)微乎其微的代價(jià),換取了后續(xù)所有調(diào)用的極致性能,下面就來詳細(xì)的介紹一下2026-05-05
ant design下運(yùn)用js實(shí)現(xiàn)框選功能，這篇文章主要介紹了ant design實(shí)現(xiàn)圈選功能,本文通過實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2019-12-12
前端實(shí)現(xiàn)圖片或視頻預(yù)覽的三種方法總結(jié)
在JavaScript中實(shí)現(xiàn)前端圖片上傳即時(shí)預(yù)覽功能是一項(xiàng)常見的需求,特別是在網(wǎng)頁交互設(shè)計(jì)中,這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)圖片或視頻預(yù)覽的三種方法,需要的朋友可以參考下2024-06-06
js實(shí)現(xiàn)類似MSN提示的頁面效果代碼分享
這篇文章主要介紹了模仿MSN消息提示的效果,推薦給大家，有需要的小伙伴可以參考下。2015-08-08
TypeScript工具類 Partial 和 Required 的場(chǎng)景分析
這篇文章主要介紹了TypeScript工具類 Partial 和 Required 的詳細(xì)講解,本文通過場(chǎng)景描述給大家詳細(xì)講解工具類的使用，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
本篇文章主要講述幾種前端JS檢測(cè)開發(fā)者工具是否打開的方法,需要的朋友可以參考下2020-10-10
JavaScript必備的斷點(diǎn)調(diào)試技巧總結(jié)（推薦）
打斷點(diǎn)操作很簡(jiǎn)單,核心的問題在于,斷點(diǎn)怎么打才能夠排查出代碼的問題所在呢?下面這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript必備的斷點(diǎn)調(diào)試技巧,需要的朋友可以參考下2021-09-09