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密 ...
随机推荐
- 通过IEnumerable接口遍历数据
使用IEnumerable接口遍历数据,这在项目中会经常的用到,这个类型呢主要是一个枚举器. 1.首先需要让该类型实现一个名字叫IEnumerable的接口,实现该接口的主要目的是为了让当前类型中增加 ...
- TestOps宣言
TestOps TestOps离不开敏捷 TestOps是测试驱动的一种延伸,它强调测试人员与运维人员沟通协作规范化的实践模式. DevOps的持续集成与持续交付,实现了从代码到服务的快速落地.而 ...
- Spark调优_性能调优(一)
总结一下spark的调优方案--性能调优: 一.调节并行度 1.性能上的调优主要注重一下几点: Excutor的数量 每个Excutor所分配的CPU的数量 每个Excutor所能分配的内存量 Dri ...
- 限制Apache日志access.log、error.log文件大小
在 Windows 下的设置例子如下: # 限制错误日志文件为 1M ErrorLog "|bin/rotatelogs.exe -l logs/error-%Y-%m-%d.log 1M& ...
- GDAL中GDALDataType中值与其在C++中数据类型对应
GDAL中的GDALDataType是一个枚举型,其中的值为: GDT_Unknown : 未知数据类型 GDT_Byte : 8bit正整型 (C++中对应unsigned char) GDT_UI ...
- Linux 学习笔记之超详细基础linux命令 Part 12
Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 11---------------- ...
- android系统通过图片绝对路径获取URI的三种方法
最近做项目要通过图片的绝对路径找到图片的URI,然后删除图片,小小总结一下获取URI的方法,亲自试验在 android 4.1.3的系统上都是可用的. 1.将所有的图片路径取出,遍历比较找到需要的路径 ...
- 在centos7 上部署 vuepress
vuepress是一款十分优秀简洁的文档生成器,可以根据目录下的md文档自动生成对应的html文件,界面简洁大方.每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加 ...
- 关于《SQLSERVER走起》微信账号自动回复功能的升级
关于SQLSERVER走起微信账号自动回复功能的升级 由于腾讯对微信公众账号的升级,本公众账号也增加了关键词自动回复功能, 只需要输入某些特定关键词,本公众账号就会进行自动回复. 例如: 输入 sql ...
- log4net 写入日志到不同的位置
某些业务需要根据不同的功能将日志记录到不同的位置,以便于区分. <?xml version="1.0" encoding="utf-8" ?> &l ...