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密 ...
随机推荐
- 【Java深入研究】2、JDK 1.8 LinkedList源码解析
LinkedList是一个实现了List接口和Deque接口的双端链表. 有关索引的操作可能从链表头开始遍历到链表尾部,也可能从尾部遍历到链表头部,这取决于看索引更靠近哪一端. LinkedList不 ...
- potplayer打开多个视频文件
选项-基本-多重处理方式-新开一个播放进程播放
- Matlab Gauss quadrature
% matlab script to demonstrate use of Gauss quadrature clear all close all % first derive the 2-poin ...
- Python3 系列之 环境配置篇
以下所有操作是基于 Windows10 和 Python3.6 来进行的,其它平台和 python 版本请自行百度. 高效使用 Visual Studio Code 系列 环境安装 1.Python ...
- UdPloyer交付系统设计思路
宏观愿景: 一键搞定项目依赖环境,将软件交付过程管理化,实现DevOps研发测试运维一体化. 一.一站式版本交付生命周期管理 业务线[私有权限] 1.SVN源码交付 合主干.版本归档.拉分支.版本回 ...
- SQL Server 基本INSERT语句
1.基本INSERT语句,单行插入 如果没有列出列,则使一一对应. 2.多行插入 3.INSERT INTO ... SELECT 语句 要插入的语句是从其他表中查询出来的. 注意:数据类型得相同或者 ...
- JS如何判断一个数组是否为空、是否含有某个值
一.js判断数组是否为空 方法一: arr.length let arr = []; if (arr.length == 0){ console.log("数组为空") }els ...
- 【转】用yum只下载rpm包而不安装
转自:http://liucheng.name/1950/ CentOS用yum安装软件是非常方便的,有时,我们只需要下载其中的rpm包,而不直接安装时咋办呢? 一般情况下,yum是不提供只下载的功能 ...
- Linux 学习笔记之超详细基础linux命令 Part 11
Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 10---------------- ...
- id、name、setter方法注入、构造方法注入、工厂方法注入、注解注入、方法注入、方法替换、Web作用域、普通bean引用Web作用域的bean
spring IoC的id和name id的命名需要满足XML对id的命名规范,必须以字母开始,后面可以是字母.数字.连字符.下画线.句号.冒号等等号,但逗号和空格是非法的.如果用户确实希望用一些特殊 ...