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 相关文章推荐
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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
星际争霸秘籍
2020/03/04 星际争霸
56.com视频采集接口程序(PHP)
2007/09/22 PHP
php封装的page分页类完整实例
2016/10/18 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
python实现自动登录后台管理系统
2018/10/18 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
Linux机考试题
2015/10/16 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
调查研究项目计划书
2014/04/29 职场文书
政府法律服务方案
2014/06/14 职场文书
2014年生产部工作总结
2014/12/17 职场文书
五年级学生期末评语
2014/12/26 职场文书
公司员工辞职信范文
2015/05/12 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python