一款没有依赖的、给力的一键复制的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. SonarQube在CentOS上的安装

    1 简介 SonarQube 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具.与持续集成工具(例如 Hudson/Jenkins 等 ...

  2. fbx模型

    [fbx模型] 1.FBX是Autodesk的一个用于跨平台的免费三维数据交换的格式(最早不是由Autodesk开发,但后来被其收购),目前被 众多的标准建模软件所支持,在游戏开发领域也常用来作为各种 ...

  3. 【bzoj4296】再见Xor

    4269: 再见Xor Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 176  Solved: 107[Submit][Status][Discuss ...

  4. Bootstrap 中的 aria-label 和 aria-labelledby 属性

    这两个属性是为特殊网页阅读器设置的属性,在一些特殊设备上,当浏览到这样的内容设备会将内容读出来.是为了一些有视力障碍的人能够同样”浏览”网页而准备的. 转自http://blog.csdn.net/l ...

  5. Content 控件

    转自:http://www.cnblogs.com/superfang/archive/2008/06/29/1232158.html 创建一个服务器控件,该控件包含呈现到母版页中的 ContentP ...

  6. 在Win7 64位电脑上安装Sql Server 2008 R2 Express

    安装环境说明: 操作系统:Win7 64位 英文版 安装步骤: 1.准备安装文件 下载网址:https://www.microsoft.com/zh-CN/download/details.aspx? ...

  7. ensemble 的2篇入门 文章

    python 篇: http://machinelearningmastery.com/ensemble-machine-learning-algorithms-python-scikit-learn ...

  8. JMS-消息中间件的应用02-安装ActiveMQ-来自慕课学习-新手学习

    What is ActiveMQ?       -----突然好想打英文,好奇怪 请看来自官网的介绍: Apache ActiveMQ ™ is the most popular and powerf ...

  9. input file 获取不到Request.Files 解决办法

    <input type="file" name="xxxxxxx"/>必须有“name”属性,否则在后台代码中用Request.Files是取不到值 ...

  10. rest-framework之序列化组件

    一:django自带序列化组件 Django内置的serializers(把对象序列化成json字符串) from django.core import serializers def test(re ...