JavaScript实现点击按钮复制指定区域文本(推荐)
作者：段昊辰 · 时间：2023-08-22 17:36:30
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实现点击按钮复制指定区域文本，希望对大家有所帮助
来源：https://zhuanlan.zhihu.com/p/23920249
标签：js,按钮,复制文本
0
投稿猜你喜欢
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2021-07-01 14:41:42
Vue中watch使用方法详解
2024-04-30 10:40:45
MS sqlserver 2008数据库转换成2000版本的方法
2024-01-28 11:37:53
为网页设计创建有效的配色方案
2011-08-31 12:55:57
goland使用go mod模式的步骤详解
2024-05-25 15:16:35
php bootstrap实现简单登录
2024-04-10 10:42:07
自动清空站点目录下所有文件
2009-06-24 11:11:00
如何在页面中对不同的数据进行相同的处理？
2010-06-26 12:30:00
python获取指定目录下所有文件名列表的方法
2022-03-24 08:05:39
谈谈如何管理门户级网站的CSS/IMG/JS文件
2009-09-03 11:48:00
Python中多个数组行合并及列合并的方法总结
2021-10-08 11:00:23
window.showModalDialog()返回值的学习心得总结
2024-05-09 10:35:39
python实现的各种排序算法代码
2022-06-17 05:41:19
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2024-04-17 10:41:20
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021-12-18 03:09:23
Python编程pygal绘图实例之XY线
2021-02-17 10:42:10
在Python开发环境中调用ChatGPT模型详细过程
2022-03-25 21:59:29
基于TensorFlow的CNN实现Mnist手写数字识别
2022-03-13 11:20:28
Monster for Chrome
2010-05-04 16:30:00
Python语法分析之字符串格式化
2021-10-09 18:00:09