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 相关文章推荐
javascript json2 使用方法
Mar 16 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
Vuex之理解state的用法实例
Apr 19 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 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
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
PHP中的替代语法简介
2014/08/22 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
php表单提交实例讲解
2015/11/12 PHP
php 可变函数使用小结
2018/06/12 PHP
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
js实现时钟定时器
2020/03/26 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
python多维数组切片方法
2018/04/13 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
pycharm 安装JPype的教程
2019/08/08 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
高二英语教学反思
2014/01/19 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
洗发露广告词
2014/03/14 职场文书
写给父母的感谢信
2015/01/22 职场文书
小马王观后感
2015/06/11 职场文书
高一英语教学反思
2016/03/03 职场文书