clipboard复制剪贴板功能，以及用requirejs时报错---Uncaught ReferenceError: Clipboard is not defined
zeroclipboard是走的flash插件，手机浏览器是不支持的,所以不得不舍弃之，用clipboard，clipboard不需要flash就可以完成复制剪切等功能，而且可以兼容pc,移动端，下面介绍如下
下面这个js插件能实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<title>移动端复制到剪贴板！</title>
</head>
<body>
<p>哈哈<span id="target">你没看错，就是复制的这里</span></p>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">
复制按钮
</button>
</body>
<script>
$(document).ready(function(){
var targetText=$("#target").text();
var clipboard = new Clipboard('#copy_btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
alert("复制成功");
e.clearSelection();
});
});
</script>
</html>
如果项目中用到了 requirejs,会出现 Uncaught ReferenceError: Clipboard is not defined，可是文件确实都引入进去了的，死活找不到答案，最好各种百度菜找到答案，
这是因为在有requirejs时，Clipboard不会把自己暴露为全局变量。
可以把Clipboard定义到requirejs的配置模块，然后如下使用：
define(['clipboard'],function(clipboard){
window['Clipboard']=clipboard;
var clipboard = new Clipboard('.copy-button');
clipboard.on('success', function(e) {
layer.msg("复制成功");
e.clearSelection();
});
大功告成，总算完成
});
参考：https://github.com/3yteam/personalDemo/tree/master/projectSummary/copy
clipboard复制剪贴板功能，以及用requirejs时报错---Uncaught ReferenceError: Clipboard is not defined的更多相关文章
- vue项目中引入mui.poppicker.js文件时报错“Uncaught ReferenceError: mui is not defined”
解决:在mui.js的源文件后最后加上 window.mui = mui;
- Android Clipboard(复制/剪贴板)
Android提供的剪贴板框架,复制和粘贴不同类型的数据.数据可以是文本,图像,二进制流数据或其它复杂的数据类型. Android提供ClipboardManager.ClipData.Item和Cl ...
- Firefox37.0.1+selenium 2.53+python3.6打开浏览器时报错NameError: name 'basestring' is not defined
环境:Win7 Firefox浏览器版本37.0.1 Python36 Selenium2.53.0 在Pycharm里执行以下3行脚本: from selenium i ...
- js实现点击按钮复制文本功能
最近项目活动中用到复制文本功能,发现在chrome中之前的clipboard的demo失效了,查了下发现是因为版本升级导致的.最新用法如下: <!DOCTYPE html> <htm ...
- Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能
开发中经常会用到复制的功能,在 IE 下实现比较简单,但要想做到跨浏览器比较困难了. 本文将介绍一个跨浏览器的库类 Zero Clipboard ,它利用 Flash 进行复制,所以只要浏览器装有 F ...
- 【转】js实现复制到剪贴板功能，兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 【原】js实现复制到剪贴板功能，兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 黄聪：JS实现复制到剪贴板功能，兼容所有浏览器（转）
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- JS pc端和移动端共同实现复制到剪贴板功能实现
JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了, ...
随机推荐
- 51nod 1422(强行YY)
1422 沙拉酱前缀 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 沙拉酱非常喜欢数字序列.这正是他要弄一个关于 ...
- tomcat提示警告: An attempt was made to authenticate the locked user"tomcat"
启动tomcat7之后,运行正常,但是运行一段时间就会提示以下警告: 十二月 04, 2013 5:10:15 下午 org.apache.catalina.realm.LockOutRealm au ...
- 提示reg不是批处理命令怎么办
'regsvr32' 不是内部或外部命令,也不是可运行的程序或批处理文件.请按任意键继续. . . 系统环境变量被改了进入控制面板>高级>环境变量>系统变量,Path双击一下,填入C ...
- Ext-ajax请求数据
Ext.Ajax.request({ url: webPath+'/news/newsEastmoneyList', method: 'POST', success: function (respon ...
- ftp,http,https有啥区别？
[ftp与http的区别?] HTTP(Hyper Text Transmission Protocol)是超文本传输协议,FTP(FileTransferProtocol)是文件传输协议! HTTP ...
- break 的一个“高级用法”(转)
转载:http://blog.csdn.net/lovelan1748/article/details/5321558 本小节不是很适于没有多少实际编程经历的初学者,所以初学者可以跳过,以后再回头阅读 ...
- 【uoj262】 NOIP2016—换教室
http://uoj.ac/problem/262 (题目链接) 题意 有${n}$个时间段,第${i}$个时间段可以选择在${c_i}$教室上课,也可以选择申请换课,有${k_i}$概率申请通过,在 ...
- dotnet反编译工具大全
反编译不是为了破解软件,而是在开发时更好的读懂程序干了什么,比如MVC的源码,如果使用1和4的VS插件能更好的进行断点跟踪. 常用,效率最高: 1.[.NET Reflector]首选,能比较好的反编 ...
- android下载简单工具类
功能是实现下载文件,图片或MP3等,为了简单起见使用单线程,此代码为MarsAndroid教程的复制品,放在此处,留着参考. 首先是一个得到字节流随后保存到内存卡上的工具类: package com. ...
- [NOIP2012] 提高组 洛谷P1084 疫情控制
题目描述 H 国有 n 个城市,这 n 个城市用 n-1 条双向道路相互连通构成一棵树,1 号城市是首都, 也是树中的根节点. H 国的首都爆发了一种危害性极高的传染病.当局为了控制疫情,不让疫情扩散 ...