HTML5中的execCommand命令
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>
HTML5中的execCommand命令的更多相关文章
- JavaScript中的execCommand()命令详解及实例展示
execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) ,其 ...
- 带你认识HTML5中的WebSocket
这篇文章主要介绍了带你认识HTML5中的WebSocket,本文讲解了HTML5 中的 WebSocket API 是个什么东东.HTML5 中的 WebSocket API 的用法.带Socket. ...
- 测试开发之前端——No2.HTML5中的标签
HTML5中的标签. 标签 描述 <!--...--> 定义注释. <!DOCTYPE> 定义文档类型. <a> 定义超链接. <abbr> 定义缩写 ...
- HTML5 中 40 个最重要的技术点
介绍 我是一个ASP.NET MVC的开发者,最近在我找工作的时候被问到很多与HTML5相关的问题和新特性.所以以下40个重要的问题将帮助你复习HTML5相关的知识. 这些问题不是你得到工作的高效解决 ...
- 在HTML5中如何提高网站前端性能
1. 用web storage替换cookiesCookie最大的问题是每次都会跟在请求后面.在HTML5中,用sessionStorage和localStorage把用户数据直接在客户端,这样 ...
- 在Html5中与服务器交互
转自原文 在Html5中与服务器交互 刚刚涉足职场,上头就要我研究HTML5,内嵌到手机上,这对我来说完全是一个陌生的领域,不过也正好给自己一个机会来学习,最近做到要跟服务器交互这部分,这部分可是卡了 ...
- linux shell 中的sleep命令
开始还以为是这样的语法: sleep(1), 后面发现是: linux shell 中的sleep命令 分类: LINUX 在有的shell(比如linux中的bash)中sleep还支持睡眠(分,小 ...
- html5中canvas的使用 获取鼠标点击页面上某点的RGB
1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...
- 在脚本中使用sudo命令，将密码保存在脚本中，不需要手动输入密码
在脚本中使用sudo命令,将密码保存在脚本中,不需要手动输入密码. #!/bin/bash echo 'xxx密码xxx'|sudo -S service mysql start echo 'xxx密 ...
随机推荐
- git常用命令以及如何与fork别人的仓库保持同步
简单常用命令1.git status查看当前仓库是否有文件改动a:提示Your branch is up-to-date with 'origin/master'.nothing to commit, ...
- ORM作业
使用之前学到过的操作实现下面的查询操作:1. 查询平均成绩大于60分的同学的id和平均成绩:2. 查询所有同学的id.姓名.选课的数量.总成绩; 3. 查询姓“李”的老师的个数: 4. 查询没学过“李 ...
- PATH、CLASSPATH、CLASSPATH
PATH: 说明: 环境变量中的path,意在在向计算机发出指令时的一个指向路径,如 一般会在path里加上:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin 其中:%JAVA_ ...
- input上传文件个数控制
HTML: <h3>请上传[2,5]个文件</h3> <form action="" enctype="multipart/form-dat ...
- css3 Box model 与 Box-sizing
1.Box Model(盒模型) CSS中的Box Model分为两种:第一种是W3C的标准模型,另一种是IE的传统模型.它们的相同之处是对元素的width.height.padding.border ...
- [VUE ERROR] Duplicate keys detected: 'tab-user'. This may cause an update error.
错误消息如图: 如果你看到此错误消息,则说明 v-for 指令的 key值 重复了,只需修改你的 key值 让其不会重复即可.
- CentOS7系列--安装Chrome浏览器
CentOS7系列--安装Chrome浏览器 1. 创建yum源文件 [root@server20 ~]# cd /etc/yum.repos.d/ [root@server20 yum.repos. ...
- NoHttp封装--03 cookie
NoHttp请求自动维持Cookie: 1.支持Session.Cookie.临时Cookie的位置. 2.支持App重启.关机开机后继续持久化维持. 3.提供了接口,允许开发者监听Coo ...
- Java并发编程（二）同步
在多线程的应用中,两个或者两个以上的线程需要共享对同一个数据的存取.如果两个线程存取相同的对象,并且每一个线程都调用了修改该对象的方法,这种情况通常成为竞争条件. 竞争条件最容易理解的例子就是:比如 ...
- 监听软件异常崩溃并且保持日志--CrashHandler编写自己的异常捕获类
平时写代码,我们可能会抛出各种异常,这些异常有些是我们测试过程中发现进行解决的,但是也有一些异常是我们未知的,不论是代码的逻辑问题还是Android本身底层的一些bug,我们都需要及时了解并进行解决. ...