可以使用cdn 或者直接下载 设置好引用路径(百度云下载)

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

html

<input type="text" id="copyVal" readonly value="被复制内容" />
<button class="copyBtn" >点击复制</button>

javascript

        //实例化 ClipboardJS对象;
var copyBtn = new ClipboardJS('.copyBtn'); copyBtn.on("success",function(e){
// 复制成功
alert(e.text);
e.clearSelection();
});
copyBtn.on("error",function(e){
//复制失败;
console.log( e.action )
});

这里的ClipboardJS在实例化时, 如果报错:clipboard is not defined

解决办法就是如下:

new ClipboardJS(obj)

原因就是 Clipboard.JS版本是2.0及以上版本

原文地址:https://blog.csdn.net/fly_wugui/article/details/80327385

【Html】Clipboard.js 实现点击复制,剪切板操作的更多相关文章

  1. Clipboard.js – 现代方式实现复制文本到剪贴板

    复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...

  2. js 实现点击复制文本内容

    js  实现点击复制文本内容 <table> <tr><td>姓名:<span onclick="copyContent(this);" ...

  3. js实现点击复制网页内容(基于clipboard.js)

    浏览网页过程中会遇到点击复制链接地址的情况,下面就介绍一种实现方法,该方法是基于clipboard.js: 官网地址:https://clipboardjs.com/: clipboard.js使用比 ...

  4. clipboard.js 实现web端---> 复制到剪切板功能

    package.json 中: 添加clipboard 依赖 "dependencies": { "vue": "^2.2.2", &quo ...

  5. 解决clipboard.js在移动端复制失败的问题

    1.前沿 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是 ...

  6. clipboard.js实现页面内容复制到剪贴板

    clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...

  7. PyQt5剪切板操作

    1.使用剪切板import sys,mathfrom PyQt5.QtWidgets import *from PyQt5.QtGui import *from PyQt5.QtCore import ...

  8. cliipblard.js 实现点击复制

    <script src="js/clipboard.min.js"></script> <script type="text/javascr ...

  9. js实现点击复制网页内容(基于execCommand)

    通过execCommand方法来实现,当一个HTML文档切换到设计模式 designMode时,文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容.大多数命令影响文档 ...

随机推荐

  1. vue-router新手指南

    在学习完vue.js以及vuex之后,我们还剩下vue全家桶中的最后一个需要学习的组件,这就是vue-router了,本篇文章我们就来一起认识和入门vue-router.为什么我们只是入门呢?因为在这 ...

  2. 制做rpm包工具fpm安装

    安装ruby模块 [root@c01 ~]# yum install ruby rubygems ruby-devel -y # 查看当前使用的rubygems仓库 [root@c01 ~]# gem ...

  3. [Windows Azure] Using the Graph API to Query Windows Azure AD

    Using the Graph API to Query Windows Azure AD 4 out of 4 rated this helpful - Rate this topic This d ...

  4. THP Transparent HugePages 相关知识与关闭【转】

    最近遇到个LINUX系统内存比较大,未开 HugePages,业务有变化导致ORACLE连接数剧增至上千个,PageTables达到上百G,导致内存不足系统HANG住的案例. 因此需要开启 HugeP ...

  5. pyspark实现自动提示以及代码高亮

    pyspark实现自动提示以及代码高亮 起因 打开pyspark发现啥提示都没有,太不友好了啊,然后忍不住谷歌了一下,发现了这篇文章,内容如下: 1.pip install ptpython; 2.e ...

  6. 【转】asp.net中@page指令的属性Inherits、Src、CodeBehind区别

    Inherits.Src.CodeBehind 在 ASP.NET 中使用代码隐藏方法来设计Web 窗体,可使页代码能够更清晰地从 HTML 内容中分离到完全单独的文件中. 通常一个 @page 指令 ...

  7. python2 和 python3 区别

    python2 python 2 必须加object加入后是新式类 python 2 不加object是经典类 class HTTP(object): # 经典类和新式类 @staticmethod ...

  8. Python3将两个有序数组合并为一个有序数组

    [本文出自天外归云的博客园] 第一种思路,把两个数组合为一个数组然后再排序,问题又回归到冒泡和快排了,没有用到两个数组的有序性.(不好) 第二种思路,循环比较两个有序数组头位元素的大小,并把头元素放到 ...

  9. git stash 暂存恢复和文件误删恢复

    git commit提交文件,服务器返回本地文件有修改. 1.git stash :暂存本地代码 2.git pull origin develop : 获取远程分支代码 3.git stash po ...

  10. Python爬虫技巧

    Python爬虫技巧一之设置ADSL拨号服务器代理 reference: https://zhuanlan.zhihu.com/p/25286144 爬取数据时,是不是只能每个网站每个网站的分析,有没 ...