HTML5中的execCommand命令
在html5中，可以通過execCommand方法來運行一條命令，每一條命令都將對用戶通過鼠標所選取的內容執行一些操作。
1. execCommand方法
瀏覽器對execCommand方法執行命令有哪些區別？
一：對可編輯頁面或不可編輯頁面的區別：
firefox，chrome和safari瀏覽器只能針對可編輯的頁面或可編輯的元素中的用戶通過鼠標選取的內容執行execCommand方法。
IE9和opera 可以針對不可編輯頁面或元素執行execCommand方法。
在html5中，可以通過給元素設置 contentEditable屬性設置為true為元素設置可編輯元素，或將頁面的designMode屬性值設為on的方法使整個頁面變為可編輯頁面(如：document.designMode = "on" )
二：插入代碼的區別是：
IE9+瀏覽器 將插入一個HTML標簽。
在firefox，chrome，safari瀏覽器將插入一個內嵌一段樣式代碼的標簽；
在Opera瀏覽器中，部分命令將插入HTML標簽，部分命令將插入內嵌樣式代碼的標簽。
舉例說明瀏覽器的不同：
比如一段非粗體文字運行 bold命令時，不同瀏覽器的表現如下：
IE9和opera，在非粗體文字兩端添加<strong>標簽與</strong>標簽。
在firefox，chrome，safari瀏覽器中，將在非粗體文字兩端添加 <span style="font-weight:bold">標簽與</span>標簽。但是針對一段已經粗體文字運行bold命令時，瀏覽器會將移除動態插入的標簽。
execCommand方法使用方式如下：
document.execCommand(command, flag, value);
第一個參數的含義是：它是一個字符串，區分大小寫，代表一個命令。
第二個參數的含義是：它是一個布爾型，用於指定是否需要顯示一個特定的用戶界面，默認值為false。
第三個參數的含義是：代表命令所使用的參數值。如果不使用該參數值，那么參數值為null。
execCommand 方法的返回值是一個布爾型，當返回值為false表示命令時發生錯誤，為true時代表命令成功運行。
下面是一個demo，頁面上有一個div元素，每次用戶選取div元素中的文字時，當松開鼠標左鍵時使用 execCommand方法運行bold命令將用戶選取文字設定為粗體文字。
如下代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div contenteditable="true" onmouseup="setToBold()">addsasdsaddsads</div> <script> function setToBold() { document.execCommand('bold', false, null); } </script> </body> </html>
2. queryCommandSupported方法
該方法來查詢當前瀏覽器中是否能運行某個命令，使用方法如下所示：
document.queryCommandSupported(command);
參數command代表一個命令，該方法返回一個布爾值，true的話說明當前瀏覽器能運行該命令，否則的話，當前瀏覽器不能運行該命令。
下面是一個demo，頁面顯示一個 測試 按鈕，單擊該按鈕時，會判斷頁面是否支持 myCommand方法與bold方法。
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <button onclick="TestCommands()">測試</button> <script> function TestCommands() { if (document.queryCommandSupported("myCommand")) { alert("當前瀏覽器能夠運行myCommand命令"); } else { alert("當前瀏覽器不能夠運行myCommand命令"); } if (document.queryCommandSupported('bold')) { alert("當前瀏覽器能夠運行bold命令"); } else { alert("當前瀏覽器不能夠運行bold命令"); } } </script> </body> </html>
3. queryCommandState方法
該方法用於判斷當前命令的狀態。命令的狀態取決於當前頁面中用戶用鼠標所選取內容的顯示狀態。
使用方式如下：
document.queryCommandState(command);
該方法返回一個布爾值，當返回值為true，代表該命令狀態為true，當返回值為false，代表該命令狀態為false。
下面是一個測試demo，有一個div元素及文字，和一個 "測試bold命令的狀態"按鈕，用戶首次選取div元素中的文字后單擊 "測試bold命令狀態" 按鈕時，該返回值為false，同時該文字變為粗體，再次點擊該按鈕時，該返回值變為true，選取文字變為非粗體文字。如下代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div contenteditable="true">adsadsdasdsadas</div> <button onclick="toBlod()">測試bold命令狀態</button> <script> function toBlod() { var state = document.queryCommandState('bold'); switch(state) { case true: alert('粗體格式被去除'); break; case false: alert("選取文字將變為粗體文字"); break; } document.execCommand('bold', false, null); } </script> </body> </html>
4. queryCommandIndeterm方法
該方法來判斷一個命令是否處於無法確定狀態。
比如用戶通過鼠標選取的文字既有粗體文字，又有非粗體文字，那么bold命令狀態是無法確定的。
使用方式如下：
document.queryCommandIndeterm(command);
該方法返回一個布爾值，當返回true的時候，說明該命令的狀態是無法確定的。
如下demo，當用戶選取的文字既有粗體文字，又包括非粗體文字的時候，單擊 "測試bold命令的狀態"按鈕.
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div contenteditable="true">dassdadsdsdasasddasadsdsdsa</div> <button onclick="toBold()">測試bold命令的狀態</button> <script type="text/javascript"> function toBold() { if (document.queryCommandIndeterm('bold')) { alert('bold命令處於無法確定狀態') } else { if (document.queryCommandState('bold')) { alert('粗體格式將被去除'); } else { alert('選取文字將變為粗體文字'); } } document.execCommand('bold', false, null); } </script> </body> </html>
注意：目前該方法貌似只有firefox支持，chrome和safari貌似不支持。請在firefox測試。
5. queryCommandEnabled方法
該方法是來判斷一個命令是否處於有效狀態。使用方式如下：
document.queryCommandEnabled(command);
如下demo，頁面上有一個可編輯的div元素及文字，還有一個 "切換文字格式的" 按鈕，當用戶沒有在頁面中按下鼠標左鍵選取文字的時候，而直接單擊該按鈕時候，將在彈出信息框中提示 "請選取一些文字“；當用戶鼠標選取了div元素中的文字時，然后再單擊按鈕時候，用戶選取的文字變為粗體文字。如下代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div contenteditable="true">adsadsdasdsadas</div> <button onclick="toBlod()">測試bold命令狀態</button> <script> function toBlod() { if (document.queryCommandEnabled('bold')) { document.execCommand('bold', false, null); } else { alert('請選取一些文字'); } } </script> </body> </html>
6. queryCommandValue 方法
該方法返回用戶通過鼠標所選取內容的命令值。命令值的類型取決於queryCommandValue方法的參數命令。
使用方法如下：
document.queryCommandValue(command);
比如如下代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div contenteditable="true"> <span style="color:red">dassd</span> <br /> <span style="color: blue">adadsads</span> </div> <button onclick="getColor()">獲取選取文字的顏色</button> <script type="text/javascript"> function getColor() { alert(document.queryCommandValue('foreColor')); } </script> </body> </html>