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>