最近项目活动中用到复制文本功能，发现在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. 看书记笔记 书名21天学C#

    ☆:为重点★:为科普△:注▲:术语 前言概述 ☆一门语言必须包括诸如异常处理,无用单元收集,可扩展数据类型以及代码安全性等特征☆C#特性:简单性,面向对象,模块性,灵活性,简明性 ☆C#面向对象的封装 ...

  2. UML作业第三次：分析《书店图书销售管理系统》

    分析图书销售管理系统 一.概览 PlantUML类图语法学习小结 <书店图书销售管理>的类图元素 绘制类图脚本程序 绘制的类图 二.PlantUML类图语法 1.类之间的关系绘制 示例: ...

  3. linux 部署

    一.d2 安装之后的配置 centos系统安装后的基本配置: .常用软件安装: yum install -y bash-completion vim lrzsz wget expect net-too ...

  4. mybatis一级缓存

    在select  处添加useCache=false flushCache=true, mybatis默认开启一级缓存

  5. 5. Web vulnerability scanners （网页漏洞扫描器 20个）

    5. Web vulnerability scanners (网页漏洞扫描器 20个) Burp Suite是攻击Web应用程序的集成平台. 它包含各种工具,它们之间有许多接口,旨在方便和加快攻击应用 ...

  6. 2.GUI控件的使用 --《UNITY 3D 游戏开发》笔记

    1.Label 控件 编写脚本文件,直接绑定在main camera上 public class labelScript : MonoBehaviour { //设定一个值来接收外部赋值的字符串 pu ...

  7. pip安装报错 解决办法

    安装库时报错:Could not fetch URL https://pypi.python.org/simple/wheel/: 解决办法:  pip --trusted-host pypi.pyt ...

  8. flagr 数据库配置

    flagr 是一个很不错的特性开关.a/b 测试服务,默认使用的是sqlite 数据库,但是我们可以通过配置,使用不同的数据库 sqlite.mysql.postrgresql.json_file.j ...

  9. python中使用 C 类型的数组以及ctypes 的用法

    Python 在 ctypes 中为我们提供了类似C语言的数据类型, 它的用途(我理解的)可能是: (1) 与 其他语言(如 C.Delphi 等)写的动态连接库DLL 进行交换数据,因为 pytho ...

  10. Fiddler2如何对Android应用进行抓包

    Fiddler2抓包工具的下载和使用  2018-04-22 18:06:37     0     0     0 Fiddler是一款非常流行并且实用的http抓包工具,它的原理是在本机开启了一个h ...