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浏览器下查看效果

注意：目前该方法貌似只有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>