JavaScript实现点击按钮复制指定区域文本(推荐)


Posted in Javascript onNovember 25, 2016

html5的webAPI接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能,不需要依赖flash。

代码如下:

/* 创建range对象 */
const range = document.createRange();
range.selectNode(element); // 设定range包含的节点对象 
/* 窗口的selection对象,表示用户选择的文本 */
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉
selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中
document.execCommand('copy'); // 执行copy命令,copy用户选择的文本

测试:

浏览器的版本号为我测试时使用的版本。

edge浏览器、Chrome(v54.0.2840.99 m)、Firefox(v49.0.1)可用。

IE9、IE10、IE11会弹出提示询问是否将文本粘贴到剪贴板上。

IE7、IE8不支持该功能。

IOS10的Safari浏览器可用。

根据反馈,IOS9以下的Safari浏览器应该是不支持该功能的。

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<article id="article">
<h4>公园一日游</h4>
<time>2016.8.15 星期二</time>
<p>今天风和日丽,我和小红去了人民公园,玩了滑梯、打雪仗、划船,真是愉快的一天啊。</p>
</article>
<button id="copy">复制文章</button>
<textarea style="width: 500px;height: 100px;" placeholder="试一试ctrl + v"></textarea>
<script>
function copyArticle(event){
const range = document.createRange();
range.selectNode(document.getElementById('article'));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
}
document.getElementById('copy').addEventListener('click', copyArticle, false);
</script>
</body>
</html>

以上所述是小编给大家介绍的JavaScript实现点击按钮复制指定区域文本,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
javascript处理table表格的代码
Dec 06 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
vue做网页开场视频的实例代码
Oct 20 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 #Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 #Javascript
Bootstrap基本布局实现方法详解
Nov 25 #Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 #Javascript
Bootstrap栅格系统学习笔记
Nov 25 #Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 #Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 #Javascript
You might like
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
php文件上传的简单实例
2013/10/19 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
jquery对dom的操作常用方法整理
2013/06/25 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
python实现将文本转换成语音的方法
2015/05/28 Python
python实现电子产品商店
2019/02/26 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
python装饰器练习题及答案
2019/11/01 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
教师业务培训方案
2014/05/01 职场文书
任命书范本大全
2014/06/06 职场文书
中秋节感想
2015/08/10 职场文书
Mysql如何查看是否使用到索引
2022/12/24 MySQL