一款没有依赖的、给力的一键复制的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. VS2010中将CString转换为const char*

    最近碰到了CString 转 const char *的问题. 以前只要简单的一个强制转换就OK了,可现在是不行了,搜索了很多资料,终于搞定,主要是Unicode和ANSI的问题,只要做一个转换就可以 ...

  2. 记录MongoDB常用查询

    {$and:[{"}}]} // flag不等于1 也不等于0 {$or:[{"flag" :{ $ne:"1"}},{"flag" ...

  3. java实现 数组中两个元素相加等于指定数的所有组合

      package com.algorithm.hash; public class alg1 { public static void main(String argv[]) { int[] arr ...

  4. Priceless Notes

    [Priceless Notes] 1.人类对价格的绝对值没有准确的判断,但是价格或物体的相对值有较准确的判断. 2.物理强度与主观体验的关联成幂曲线.如60瓦的灯会让人觉得亮,但要让人觉得2倍亮的话 ...

  5. linux上mysql安装

    所有平台的MySQL下载地址为: MySQL 下载. 挑选你需要的 MySQL Community Server 版本及对应的平台. MySQL - MySQL服务器.你需要该选项,除非你只想连接运行 ...

  6. ZIP压缩格式与RAR压缩格式

    早已习惯了安装系统之后必须安装winrar,压缩文件也已经习惯了rar格式,这种习惯的力量真的挺可怕的.在工作中你的同事可能没有安装winrar,或者他们不喜欢安装盗版软件,这时候你给他们发送过去的是 ...

  7. SVN常见问题及解决方式（一）

    1.每天早上上班要update SVN,每天下班要commit SVN.2.查看是谁动了我的代码,右键 tortoise 后查看 log 日志.3.文件被别人删除,在空白处右击,show log,可以 ...

  8. Java基础语法(二)<运算符>

    运算符: 下面的都是相关的练习: 1.键盘录入一个三位整数数,请分别获取该三位数上每一位的数值 import java.util.Scanner; public class Test02 { publ ...

  9. URAL 1141. RSA Attack（欧拉定理+扩展欧几里得+快速幂模）

    题目链接 题意 : 给你n,e,c,并且知道me ≡ c (mod n),而且n = p*q,pq都为素数. 思路 : 这道题的确与题目名字很相符,是个RSA算法,目前地球上最重要的加密算法.RSA算 ...

  10. linux 的各个文件夹都是干什么用

    http://www.ruanyifeng.com/blog/2012/02/a_history_of_unix_directory_structure.html http://www.pathnam ...