可以使用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. 使用flow捕获js错误提高代码质量

    本文将介绍Flow及其主特性.下面分别从如何安装设置,如何添加类型注释,如何在运行时自动去掉注释等方面来介绍. 安装 目前Flow兼容的操作系统有Mac OS X,Linux(64位),Windows ...

  2. 源码安装mysql5.6x启动报错:[ERROR] Can't find messagefile '/data/mysqldata/3306/english/errmsg.sys'

    :: mysqld_safe Starting mysqld daemon with databases from /data/mysqldata//data -- :: [Warning] The ...

  3. Linux系统Apache服务 - 配置HTTP的默认主页

    1.安装HTTPD和httpd-manual软件包 # yum -y install http httpd-manual 2.创建/var/www/html/index.html 内容是 Hello ...

  4. ExecutorService-10个要诀和技巧【转】

    http://ifeve.com/executorservice-10-tips-and-tricks/

  5. signal.h中的宏定义SIG_DFL及SIG_IGN

    SIG_DFL,SIG_IGN 分别表示无返回值的函数指针,指针值分别是0和1,这两个指针值逻辑上讲是实际程序中不可能出现的函数地址值.SIG_DFL:默认信号处理程序SIG_IGN:忽略信号的处理程 ...

  6. Leetcode:Edit Distance 解题报告

    Edit Distance Given two words word1 and word2, find the minimum number of steps required to convert  ...

  7. Docker考前突击

    dockerfile 介绍 镜像(Image)     容器(Container)     仓库(Repository)

  8. [转]java利用AES实现URL的参数加密

    原文地址:http://h5566h.iteye.com/blog/1465426 很多时候需要在URL传参,希望URL参数能够加密,这里我结合了文章http://www.2cto.com/kf/20 ...

  9. 【转】ExtJS获取父子、兄弟容器元素方法

    原文地址:http://www.cnblogs.com/linxiong945/p/3961732.html 1.当前对象的父对象(上级对象) this.ownerCt: 2.当前对象的下一个相邻的对 ...

  10. C语言 · 数组输出

    算法提高 数组输出   时间限制:1.0s   内存限制:512.0MB      输入一个3行4列的数组,找出该数组中绝对值最大的元素.输出该元素及其两个下标值.如有多个输出行号最小的,还有多个的话 ...