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
投稿猜你喜欢
- 如何验证IP地址？sub chkIP(boardid) dim rsIP dim ipAr
- 为数据库配置比较大的内存，可以有效提高数据库性能。因为数据库在运行过程中，会在内存中划出一块区域来作为数据缓存。通常情况下，用户访问数据库时
不了解的同学先“点这里”看看什么是Firebug。简单来说，Firebug是Firefox上用来监视、编辑和调试站点的CSS、HTML、DO- 一个SELECT查询中的LIKE语句来执行这种查询，尽管这种方法可行，但对于全文查找而言，这是一种效率极端低下的方法，尤其在处理大量数据的时
- 例如：文本abcaBcabCaBCabcaBCa，关键字bc，在不区分大小写的情况，一共有6个匹配项。 则在网页中显示的是abcaBcabC
- 本文实例讲述了Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法。分享给大家
- 近日，有关微软Open XML标准的问题又引发了某些业内人士的关注。其一是因为日前ISO（国际标准组织）成员南非和巴西相继就ISO批准微软的
- 古巴比伦王颁布了汉摩拉比法典，刻在黑色的玄武岩，距今已经三千七百多年，你在橱窗前…熟悉吧？没错，这就是周董的爱在西元前歌词。前不久工作不是很
- 即text-overflow:ellipsis，需要配合white-space:nowrap使用。运行代码：<div style=&q
- 一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字
- 1.安装第三方模块包pip install django-ckeditor2.添加应用INSTALLED_APPS = [ ..
- 建立资料表：Step1首先开启phpmyadmin，进入wordpress资料库中，并新增一个wp_gbook的资料表与栏位数目8。Step
- 这些天因为有数据割接的需求，于是有要写关于批量更新的程序。我们的数据库使用的是SQLSERVER2005，碰到了一些问题来分享下。首先注意S
- 模式库 在模式库里,我将列出所有电子商务网站需要的模式.以下将罗列出经典常用的模式案例,我也试图让这些模式看起来更有趣味性与实用性。(Yah
- 用SQLyog来分析MySQL数据库：SOLyog的下载、安装以及使用很简单。我去了相关网站下载，它只有384K字节大小。它把两个文件(一个
- 如何使用数组来显示下拉菜单？可以这样，如下：Sub DoDropDown(Arr(), strSelName,
- 以下的文章主要是介绍MySQL5创建存储过程的实例演示，MySQL5创建存储在实际操作中应用的频率还是很高的，以下就是MySQL5创建存储过
- 平时我们获取事件对象一般写法如下：function getEvent(event) { return e
- 流动网页设计有很多好处，但也只有在正确使用的时候。合适的技巧会使页面在大屏幕、小屏幕抑、ＰＤＡ小屏幕上都能得到良好的呈现。但是，糟糕的代码结
- 看到这篇文章的人，如果我没有估计错的话，八成是从事互联网的人，其中又有八成是做设计的。如果真是这样，可以一起庆幸一下。首先，庆幸从事着一个没
