一款没有依赖的、给力的一键复制的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. Winform Datagridview 单元格html格式化支持富文本

    Winform Datagridview 单元格html格式化支持富文本 示例: 源码:https://github.com/OceanAirdrop/DataGridViewHTMLCell 参考: ...

  2. uboot重定位代码分析（转）

    概述 重定位(relocate)代码将BootLoader自身由Flash复制到SDRAM,以便跳转到SDRAM执行.之所以需要进行重定位是因为在Flash中执行速度比较慢,而系统复位后总是从0x00 ...

  3. Xamarin官方示例代码无法部署，提示已跳过部署解决方法

    最近利用Visual Studio 2017学习Android开发.主要是通过Xamarin官方的文档进行的.官方的入门指导提供了很多的示例代码.但是下载之后,调试运行的时候,总是无法部署到虚拟机上. ...

  4. oracle xe远程访问

    oracle xe其实监听了1521端口 netstat -ano|findstr 只是没请求防火墙权限而已. 手动打开防火墙1521端口 管理员运行下面的命令 本机环境win10 netsh adv ...

  5. Location - BOM对象

    Location 对象 Location 对象包含有关当前 URL 的信息. Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问. 例子 把用户 ...

  6. 图论算法》关于SPFA和Dijkstra算法的两三事

    本来我是想把这两个算法分开写描述的,但是SPFA其实就是Dijkstra的稀疏图优化,所以其实代码差不多,所以就放在一起写了. 因为SPFA是Dijkstra的优化,所以我想来讲讲Dijkstra. ...

  7. oralce错误总结

    1>System.Data.OracleClient 需要 Oracle 客户端软件 8.1.7 或更高版本. 给oracle客户端的bin目录添加““Authenticated Users”权 ...

  8. ROS 下使用3D激光雷达 velodyne vlp-16

    Velodyne VLP16型激光雷达横向视角360°,纵向视角30° 系统和ROS版本:Ubuntu 14.04 ,ros indigo 1. 安装驱动 sudo apt-get install r ...

  9. Apache apxs命令

    一.简介 apxs是一个为Apache HTTP服务器编译和安装扩展模块的工具,用于编译一个或多个源程序或目标代码文件为动态共享对象,使之可以用由mod_so提供的LoadModule指令在运行时加载 ...

  10. 修改laravel中的pagination的样式

    运行如下命令,拷贝出pagination样式到public/vendor目录下, 然后在pagination实例上调用links(‘传路径’)方法 使用起来非常方便,同时也可以自定义样式