最近项目活动中用到复制文本功能，发现在chrome中之前的clipboard的demo失效了，查了下发现是因为版本升级导致的。最新用法如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.copy-link{
width: 478px;
height: 96px;
background: #333;
margin: 28px auto 0;
font-size: 32px;
color: #ac6c44;
line-height: 86px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="link" class="link-url indent">即将被复制的内容</div>
<div onselectstart="return false" class="copy-link" data-clipboard-action="copy" data-clipboard-target="#link">复制链接</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<script src="clipboard.js"></script>
<script>
$('.copy-link').click(function(){
var clipboard = new ClipboardJS('.copy-link');
clipboard.on('success', function(e) {
console.log(e);
alert('复制成功');
});
clipboard.on('error', function(e) {
alert('复制失败');
});
});
</script>
</html>
 
另附上另一种复制方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="link-box">
<div id="link-box">
<div class="link-con">
Hello World!
</div>
<div class="link-url">您的专属链接：</div>
<div class="link-url indent">hello world!!!</div>
</div>
<div onselectstart="return false" class="copy-link">复制链接</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<script src="clipboard.js"></script>
<script>
$('.copy-link').click(function(){
copyTxt('link-box');
});
// 复制功能
function copyTxt(con) {
const range = document.createRange();
range.selectNode(document.getElementById(con));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
alert("复制成功！");
}
</script>
</html>
 

js实现点击按钮复制文本功能的更多相关文章

  1. 原生 js 实现点击按钮复制文本

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...

  2. JS实现PC、Android、IOS端的点击按钮复制内容功能

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. JS复制文本到粘贴板，前端H5移动端点击按钮复制文本

    <span id="codeNum">FTYHDSDW</span> <span class=" code-btn" id=&qu ...

  4. vue点击按钮复制文本框内容

    1.npm进行安装 npm install clipboard --save 2.在需要使用的组件中import 引用方法:import Clipboard from 'clipboard'; 3.添 ...

  5. js 实现页面点击按钮复制内容

    前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...

  6. jquery点击按钮复制内容

    做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...

  7. iOS中点击按钮复制指定内容

    话不多说,直接上图和代码:

  8. js实现点击按钮传值

    js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  9. jquery( 点击按钮出来文本框并限制文本框的个数)

    // 首先呢  编辑这个文章  主要是用于和大家的交流  以便学习和交流!! <div class="form-group" id="spots"> ...

随机推荐

  1. python学习3---产生随机数

    1.产生随机数 import random #random.random()生成[0.0,1.0)之间的浮点数 print(random.random()) #random.randint(a,b)生 ...

  2. s21day16 python笔记

    s21day16 python笔记 一.模块 1.1 模块的定义 模块的定义 可以吧一个py文件或一个文件夹(包)当作一个模块,以便于以后其他py文件的调用 包的定义(python2与python3的 ...

  3. SpringBoot打成jar包后，获取不到读取resources目录下文件路径的问题

    问题描述: Springboot没有打成jar之前,可以成功获取读取resources目录下xxx.json文件的 路径.但是打成jar包后,接口调不通,原因是获取不到文件的路径. 原因: 在本地进行 ...

  4. Alisha’s Party （HDU5437）优先队列+模拟

    Alisha 举办聚会,会在一定朋友到达时打开门,并允许相应数量的朋友进入,带的礼物价值大的先进,最后一个人到达之后放外面的所有人进来.用优先队列模拟即可.需要定义朋友结构体,存储每个人的到达顺序以及 ...

  5. JAVA基础搬运工

    1Java线程的6种状态及切换 https://blog.csdn.net/pange1991/article/details/53860651/ 2进程和线程的区别 https://www.cnbl ...

  6. Yii2.0 RESTful API 基础配置教程

    创建api应用  通过拷贝原有的应用,重命名得到新的应用 安装完 Composer,运行下面的命令来安装 Composer Asset 插件: php composer.phar global req ...

  7. Vue面试中经常会被问到的面试题

    一.对于MVVM的理解 MVVM是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. View代表UI组件,它负责将数据模 ...

  8. C 逻辑运算, 移位运算 , 取整 , 取模(取余)

    一. 按位运算 (快速操作数据的某个位) ^   按位异或 ~  按位取反 &  按位与 |  按位或 二. 逻辑运算 &&  逻辑与   有一个值为 0 ,值为 0 ||  ...

  9. java前台线程和后台线程

     main()函数即主函数,是一个前台线程,前台进程是程序中必须执行完成的,而后台线程则是java中所有前台结束后结束,不管有没有完成,后台线程主要用与内存分配等方面.                 ...

  10. Http数据协商

    一.定义: 客户端发送给服务端请求的时候,声明拿到的数据格式以及相关的限制.服务端根据请求做出判断,返回相应的数据. 二.分类 1.请求 Accept : 想要的的数据类型 Accept-Encodi ...