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 已经在很多场合不适用了, ...
随机推荐
- [转]java反射机制
原文地址:http://www.cnblogs.com/jqyp/archive/2012/03/29/2423112.html 一.什么是反射机制 简单的来说,反射机制指的是程序在运 ...
- iOS开发小技巧--TextField的细节处理,键盘中return键的处理
一.TextField取消自动纠错和设置自身对应键盘的return键盘的样式 二.程序运行过程中,监听return键点击,实现相应操作
- dijkstra 最短路算法
最朴素的做法o(V*V/2+2E)~O(V^2)#include<iostream>using namespace std;#include<vector>#include&l ...
- Yii2的Debug工具
yii2的Debug工具 调用 r=debug 可以对程序进行性能分析,从而对程序进行改良 (1)数据库某条sql语句的执行时间 (2)debug的profiling标签 \YII::beginP ...
- linux 下删除重复行-- uniq 与 awk
$ cat file liw liw liw hdsui mdksjd liw $ cat file | uniq -u # 只删除相邻的,不保留重复行 hdsui mdksjd liw $ cat ...
- VisualSVN Server搭建VDFS分布式仓研究(未成功)
FSFS与VDFS的使用区别在于FSFS是本地仓库,VDFS是分布式仓库,实现在同一个局域网内多台仓库进行同步:以下是我的猜测,因为没搭建成功: 1.必须是同一个局域网,如果有外内网基本是不可实现,需 ...
- bestcoder杯回顾
题目列表:hdu5214~5223 5214: 当时第一反应是由递推公式推出通项公式,事实证明这就是作!大!死! 因为通项公式是这样的:L[n]=a^(n-1)*(b+L[1])-b 于是就需要快速幂 ...
- hdu5187 奇怪题
本来很水的,答案就是(2^n)-2,但是写坑了QAQ 因为原题要求答案要mod P,一开始我是这么干的: LL ans=pow_mod(,N,P); ans=(ans-)%P; ) ans=%P; p ...
- poj2284 欧拉公式
题意:给出一图形,求该图形把平面分成了几部分 欧拉公式: http://blog.csdn.net/wangxiaojun911/article/details/4586550 对于二维平面上的情况. ...
- 洛谷P3128 [USACO15DEC]最大流Max Flow [树链剖分]
题目描述 Farmer John has installed a new system of pipes to transport milk between the stalls in his b ...