JavaScript实现点击按钮复制指定区域文本(推荐)
作者：段昊辰 · 发布时间：2023-08-22 17:36:30
标签：js,按钮,复制文本
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
0
投稿猜你喜欢
- CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数
上一讲完成了基本博客的配置和项目工程的生成。这次开始将博客一些基本的操作主要是数据库方面学习。1.设计博客数据库表结构博客最主要的功能就是展- 高考在即，笔者想为孩子以后能够快乐学习数学、学习编程找到一个比较合适的项目，经过一番比较发现github上的万星项目manim(https:
- SQL触发器实例1 定义： 何为触发器？在SQL Server里面也就是对某一个表的一定的操作，触发某种条件，从而执行的一段程序。触发器是一
- CSS 文件的大小和所引起的 HTTP 的请求数是 CSS 性能的最关键因素回流(reflow)和渲染时间(非常！)没那么重要副本(dupl
- 简单的合并，本例是横向合并，纵向合并可以自行调整。import xlrd import xlwtimport shutil from xlu
- Django2.0 通过URL访问上传的文件(pdf、picture等)Django是一个成熟的web框架，基于python实现，有很多的优
- “Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口。lightbox效果网络上有很多j
- 制作自己的训练集下图是我们数据的存放格式，在data目录下有验证集与测试集分别对应iris_test， iris_train 为了向伟大的M
- 因为有大家的支持，我们才能做到现在，感谢你们这一路上对我们的支持.在这篇文章中，我们将主要针对MySQL的实用技巧，讲讲面试中相关的问题.1
- 在回程的高铁上学习了这一节，由于对cmd命令行的相关知
- 我需要使用tesseract-OCR的模块，vs的配置有点麻烦，所以采用py的环境，搭建。1.在python.org网站下载python3.
- 在ASP中利用OWC（Office Web Components）控件可轻松实现各种图表功能，如饼图，簇状柱型图，折线图
- Limit语法：SELECT * FROM table LIMIT [offset,] rows | rows OFFSET offsetL
- 使用工具：pexpect库pexpect可以理解为Linux下expect（不知道的可以百度下linux expect）的python封装。
- 一、下载git可以官网下载，傻瓜步骤安装就行下载好之后需要在idea中配置git，在File》settings》version Contro
- 前言我们经常会有这样的需求，比如评论功能，每个评论都有可能会有自己的子评论，如果在界面只展示成一列的话非常不美观，也不能体现出他们的层级关系
- 引子Matlab中有一个函数叫做find,可以很方便地寻找数组内特定元素的下标，即：Find indices and values of n
- 前言大家谈及用Pandas导出数据，应该就会想到to.xxx系列的函数。这其中呢，比较常用的就是pd.to_csv()和pd.to_exce
- wxPython树控件介绍树（tree）是一种通过层次结构展示信息的控件，如下图所示是树控件示例，左窗口中是树控件，在wxPython中树控
