可以使用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. bitcoin双花

    https://en.bitcoin.it/wiki/Irreversible_Transactions https://www.reddit.com/r/Bitcoin/comments/2e7bf ...

  2. Getting started with new I/O (NIO)

    https://www.ibm.com/developerworks/java/tutorials/j-nio/j-nio.html https://www.ibm.com/developerwork ...

  3. linux命令返回值的妙用

    什么是返回值 在shell终端中,你所输入的一切命令其实都有返回值,而这个返回值默认保存在"$?"中,举例看一下 [root@localhost ~]# touch [root@l ...

  4. 每日英语:South India's Streetside Coffee Culture

    Early one morning last week I queued outside Sri Gopi Iyengar Coffee and Tiffin Center, a coffee bar ...

  5. 对于iOS开发人工智能意味着什么

    对于iOS开发人工智能意味着什么? 前言 近几年来人工智能的话题那是炙手可热.在国内很多大佬言必谈机器学习和大数据:在美国刚毕业的人工智能 PHD 也是众人追捧,工资直逼 NFL 四分卫.人工智能甚至 ...

  6. c++ primer读书笔记之c++11(三)

    1 =default构造函数限定符 c++11针对构造函数提供了=default限定符,可以用于显式指定编译器自动生成特定的构造函数.析构或赋值运算函数.参考代码如下: class CtorDftTy ...

  7. 【神经网络】Reducing the Dimensionality of Data with Neural Networks

    这篇paper来做什么的? 用神经网络来降维.之前降维用的方法是主成分分析法PCA,找到数据集中最大方差方向.(附:降维有助于分类.可视化.交流和高维信号的存储) 这篇paper提出了一种非线性的PC ...

  8. 项目抛弃Tomcat容器,用代码启动Tomcat插件

    tomato启动代码如下: package tomcat; import org.apache.catalina.connector.Connector; import org.apache.cata ...

  9. 多 LDAP 目录服务器的 FileNet P8 系统介绍和配置实例

    摘抄笔记:http://www.ibm.com/developerworks/cn/data/library/techarticle/dm-1312multipldap/ 多 LDAP 目录服务器的 ...

  10. php去除字符串中的HTML标签

    php自带的函数可以去除/删除字符串中的HTML标签/代码. strip_tags(string,allow):函数剥去 HTML.XML 以及 PHP 的标签. 参数:string,必填,规定要检查 ...