document.execCommand()的用法小記

項目中遇到金額輸入框限制只能輸入數字，輸入特殊字符或者字母漢字時間隔不到1秒內容就會自動清空。跟正則糾纏多年的我初次見到，非常神奇-.-

代碼實現：

<input type="text" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"/>

看效果的話本身動手作作吧，無法上傳動圖。

下面着重介紹下 execCommand　　

execCommand方法是執行一個對當前文檔/當前選擇/給出範圍的命令。

處理Html數據時經常使用.
以下格式：document.execCommand(sCommand[,交互方式, 動態參數]) ，其中：sCommand爲指令參數（以下例中的」2D-Position」），交互方式參數若是是true的話將顯示對話框，若是爲false的話，則不顯示對話框（下例中的」false」即表示不顯示對話框），動態參數通常爲一可用值或屬性值（以下例中的」true」）。

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

首先要說明的是在firefox下支持很差。
下面列出的是指令參數及意義(遇到的參數加高亮) 

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" onkeyup="if(isNaN(value))execCommand('undo')" />

例2：

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

 

還有些栗子：

 1 /* 
 2 *第二個參數最好不要設置爲TRUE，不然可能會執行不了 
 3 */  
 4 //加粗  
 5 function jiacu()  
 6 {  
 7     document.execCommand("Bold",false,null);  
 8 }  
 9 //斜體  
10 function xieti()  
11 {  
12     document.execCommand("Italic",false,null);  
13 }  
14 //下劃線  
15 function xiahua()  
16 {  
17     document.execCommand("Underline",false,null);  
18 }  
19 //刪除線  
20 function shanchu()  
21 {  
22     document.execCommand("StrikeThrough",false,null);  
23 }  
24   
25 //設置字體  
26 function setFontName(param)  
27 {  
28     document.execCommand("FontName",false,param);  
29     document.getElementById("fontUl").style.display="none";   
30 }  
31 //設置字體大小  
32 function setFontSize(param)  
33 {  
34     document.execCommand("FontSize",false,param);  
35     document.getElementById("sizeUl").style.display="none";   
36 }  
37 //設置字體顏色  
38 function setFontColor(param)  
39 {  
40     document.execCommand("ForeColor",false,param)  
41     document.getElementById("fontColor1").style.display="none";   
42 }  
43 //設置背景顏色  
44 function setBackColor(param)  
45 {  
46     document.execCommand("BackColor",false,param)  
47     document.getElementById("bgColor1").style.display="none";   
48 }  
49 //刪除文字格式  
50 function removeFormat()  
51 {  
52     document.execCommand("RemoveFormat",false,null);  
53 }  
54 //對齊方式  
55 function duiqiway(param)  
56 {  
57     document.execCommand(param,false,null);  
58     document.getElementById("duiqiUl").style.display="none";   
59 }  
60 //插入列表  
61 function insertList(param)       //不能實現  
62 {  
63     document.execCommand(param,false,null);  
64     alert("暫時未實現");  
65     document.getElementById("liebiaoUl").style.display="none";   
66 }  
67 //改變縮進  
68 function changeIndent(param)    //不能實現  
69 {  
70     document.execCommand(param,false,null);  
71     alert("暫時未實現");  
72 }  
73 //連接                           //不能實現,取消連接的命令只用於用createLink命令建立的連接  
74 function setLink(param)  
75 {  
76     document.execCommand(param,false,"http://blog.csdn.net/u011043843"); //第三個參數爲URL  
77     alert("暫時未實現");  
78 }  
79 //表情  
80 function insertBQ(param)  
81 {  
82     document.execCommand("InsertImage",false,param);   //param爲圖片的url    
83     document.getElementById("bqDiv").style.display="none";   
84 }  
85   
86 //段落  
87 function parag(param)  
88 {  
89     document.execCommand("formatBlock",false,param);  
90     document.getElementById("paraUl").style.display="none";  
91 }