一款没有依赖的、给力的一键复制的JS插件   点我前往github

案例demo见下载包内demo文件夹。

这里晒出最常用的几种方式，以供不时之需。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>function-target</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- 1. Define some markup -->

    <button class="btn">Copy</button>

    <div>hello</div>

    <!-- 2. Include library -->

    <script src="../dist/clipboard.min.js"></script>



    <!-- 3. Instantiate clipboard -->

    <script>

    var clipboard = new ClipboardJS('.btn', {

        target: function() {

            return document.querySelector('div');

        }

    });

    clipboard.on('success', function(e) {

        //console.log(e);

        alert('复制成功！')

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>function-text</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- 1. Define some markup -->

    <button class="btn">Copy</button>

    <!-- 2. Include library -->

    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->

    <script>

    var clipboard = new ClipboardJS('.btn', {

        text: function() {

            return 'to be or not to be';

        }

    });

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>target-div</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- 1. Define some markup -->

    <span class="copy_content">hello 123</span>

    <button class="btn" data-clipboard-action="copy" data-clipboard-target=".copy_content">Copy</button>

    <!-- 2. Include library -->

    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->

    <script>

    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>target-input</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- 1. Define some markup -->

    <input id="foo" type="text" value="hello">

    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

    <!-- 2. Include library -->

    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->

    <script>

    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>target-textarea</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- 1. Define some markup -->

    <textarea id="bar">hello</textarea>

    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>

    <!-- 2. Include library -->

    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->

    <script>

    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

一款给力的一键复制js插件-clipboard.js的更多相关文章

  1. js插件---video.js如何使用

    js插件---video.js如何使用 一.总结 一句话总结:还是要去官方网站去看英文文档.快点把英语学好啊. 1.如何快速使用这些插件(比如video.js)? 直接百度这些js如何使用就可以了,这 ...

  2. 移动端无法复制：使用clipboard.js碰到的一个小问题

    移动端无法复制:使用clipboard.js碰到的一个小问题   直接看下面的代码:在移动端访问,点击,能正常复制. <html> <head> <meta http-e ...

  3. js插件---bootstrap-datepicker.js是什么

    js插件---bootstrap-datepicker.js是什么 一.总结 一句话总结:选择时间的插件 时间选择插件 1.datepicker如何默认选择当前天? 直接给datepicker对应的i ...

  4. js插件---layer.js使用体验是怎样

    js插件---layer.js使用体验是怎样 一.总结 一句话总结:只有jquery和js,没有css,使用各种弹出层掉用各种函数特别方便,特别简单,特别好用. 引入只需要引入这两个,css都不需要, ...

  5. clipboard.js一个可以在移动端一键复制的插件

    网址:https://clipboardjs.com/ 使用方法: 1.引入js <script src="dist/clipboard.min.js"></sc ...

  6. js实现剪切、复制、粘贴——clipBoard.js

    摘要: 最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过j ...

  7. 可操纵网页URL地址的js插件-url.js

    url.js是一款能够很有用方便的操纵网页URL地址的js插件.通过url.js你能够设置和获取当前URL的參数,也能够对当前URL的參数进行更新.删除操作.还能够将当前URL的參数显示为json字符 ...

  8. 解决IE6下PNG透明的JS插件:DD_belatedPNG.js

    DD_belatedPNG是一款解决IE6下PNG透明的JS插件,支持background-position和background-repeat属性,支持伪类.使用方法: <!--[if lte ...

  9. vue中使用剪切板插件 clipboard.js

    vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...

随机推荐

  1. xUtils怎么post请求上传json数据

    InfoSmallCodeBinding smallCode = new InfoSmallCodeBinding(); smallCode.setSmallCode("测试"); ...

  2. Checker Challenge跳棋的挑战(n皇后问题）

    Description 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行,每列,每条对角线(包括两条主对角线的所有对角线)上都至多有一个棋子. 列号 0 1 2 3 4 5 6 ...

  3. 1 JPA入门----项目搭建以及CRUD

    maven搭建JPA开发环境 1 依赖的maven pom文件     主要有hibernate-core.hibernate-entitymanager.javax-persistence.mysq ...

  4. 08-Location总结图解

    URI解析  首先要判断有没有精准匹配,能不能精准匹配.计算机里面没有什么这种差不多这种东西.跟人聊天才说差不多,最近过得怎么样啊,还行吧,差不多吧,这个不多是多还是不多啊. 预定义库->Gen ...

  5. 【bzoj1024】[SCOI2009]生日快乐

    1024: [SCOI2009]生日快乐 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2372  Solved: 1717[Submit][Statu ...

  6. laravel 模型关联之(多对多)

    多对多 多对多就相当于一个专题Topic有多个文章,但是这多个文章又属于多个专题, 而且多对都必须有一个表是他们之间的关联关系表PostTopic Post表和Topic表之间没有直接的关联,而且通过 ...

  7. Eclipse导入MyEclipse项目遇到问题解答

    导入一个其他IDE中的项目,第一一定要想到:不同IDE中的配置文件问题: 比如:tomcat启动寻找项目的根目录问题,Eclipse的webContext,Myeclipse的是Webroot文件夹, ...

  8. 在CentOS7.5里安装FTP服务器

    安装了一台CentOS7.5,字符界面,为方便上传文件到这台机器上,拟采用FTP服务上传和下载文件,在CentOS上搭建vsftpd服务环境. 记录我的安装过程,供有需要的人参考. 一.系统环境 1. ...

  9. .NET Core 1.0正式发布

    Major .NET Core components: Base Class Libraries CoreCLR runtime and RyuJIT compiler Roslyn compiler ...

  10. 问渠那得清如许？为有源头活水来。——java面向对象的思想

    20169205 2016-2017-2 <移动平台应用开发实践>第2周学习总结 教材学习内容总结 本次作业要求的部分主要是Java高级语言实现面向对象编程的基本方法,其中所介绍的面向对象 ...