可以使用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.js 首屏优化

    我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui , ajax方案选用 axios, 并引入 vuex ,使用 vuex-router- ...

  2. 黑马程序猿————Java基础日常笔记---反射与正則表達式

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 黑马程序猿----Java基础日常笔记---反射与正則表達式 1.1反射 反射的理解和作用: 首 ...

  3. [Windows Azure] How to use the Windows Azure Blob Storage Service in .NET

    How to use the Windows Azure Blob Storage Service in .NET version 1.7 version 2.0 This guide will de ...

  4. Nan-boxing技术介绍

    NaN-boxing看起来像英文翻译的“南拳”,其实它是表示一个无效的double数.NaN-boxing技术:通过一个64位的数字来表示多种数据类型的技术,它通过一个nan浮点数来保存数据,根据IE ...

  5. 使用IntelliJ IDEA搭建kafka源码环境时遇到Output path错误解决办法

    kafka源码环境搭建好之后,需要在IntelliJ IDEA开发工具中以debug方式启动kafka服务器来测试消息的生产和消费. 但是在启动kafka.Kafka类中的main方法(也就是运行 k ...

  6. HTTP Basic Authentication认证

    http://smalltalllong.iteye.com/blog/912046 ******************************************** 什么是HTTP Basi ...

  7. Ubuntu上搭建Hadoop环境(单机模式+伪分布模式)【转】

    [转自:]http://blog.csdn.net/hitwengqi/article/details/8008203 最近一直在自学Hadoop,今天花点时间搭建一个开发环境,并整理成文. 首先要了 ...

  8. HP管理工具System Management Homepage安装配置

    如果用HP的启动光盘进行系统安装时,HP SMH 及相关组件会自动安装完成,但如果是用操作系统光盘进行系统安装,则HP SMH相关组件需要手动进行安装及相关设置!HP SMH由三部分组成:HP Sys ...

  9. js设置cookie(原生js)

    cookie 与 session 是网页开发中常用的信息存储方式.Cookie是在客户端开辟的一块可存储用户信息的地方:Session是在服务器内存中开辟的一块存储用户信息的地方. JavaScrip ...

  10. LeetCode: Palindrome Partitioning II 解题报告

    Palindrome Partitioning II Given a string s, partition s such that every substring of the partition ...