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的更多相关文章

  1. vue项目中引入mui.poppicker.js文件时报错“Uncaught ReferenceError: mui is not defined”

    解决:在mui.js的源文件后最后加上 window.mui = mui;

  2. Android Clipboard(复制/剪贴板)

    Android提供的剪贴板框架,复制和粘贴不同类型的数据.数据可以是文本,图像,二进制流数据或其它复杂的数据类型. Android提供ClipboardManager.ClipData.Item和Cl ...

  3. 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 ...

  4. js实现点击按钮复制文本功能

    最近项目活动中用到复制文本功能,发现在chrome中之前的clipboard的demo失效了,查了下发现是因为版本升级导致的.最新用法如下: <!DOCTYPE html> <htm ...

  5. Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能

    开发中经常会用到复制的功能,在 IE 下实现比较简单,但要想做到跨浏览器比较困难了. 本文将介绍一个跨浏览器的库类 Zero Clipboard ,它利用 Flash 进行复制,所以只要浏览器装有 F ...

  6. 【转】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  7. 【原】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  8. 黄聪：JS实现复制到剪贴板功能，兼容所有浏览器（转）

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  9. JS pc端和移动端共同实现复制到剪贴板功能实现

    JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了, ...

随机推荐

  1. 【BZOJ 1023】【SHOI 2008】cactus仙人掌图

    良心的题解↓ http://z55250825.blog.163.com/blog/static/150230809201412793151890/ tarjan的时候如果是树边则做树形DP(遇到环就 ...

  2. 100114C

    打表找规律 第25项开始循环 #include<iostream> #include<cstdio> #include<algorithm> using names ...

  3. html-div中内容自动换行

    <div style='width: 100px;display:block;word-break: break-all;word-wrap: break-word;'> 内容超出div宽 ...

  4. hibernate在使用sql查询query自动转化成model类型数据,query.addEntity

    hibernate使用自动的hql查询或者其封装的查询方法都能字段转化成对象 而如果在hibernate中使用sql时大多返回为Object[]对象 那么如何将object[]转换成model呢,答案 ...

  5. block的使用

    转载自:http://mobile.51cto.com/hot-403897.htm 一.概述 Block是C级别的语法和运行时特性.Block比较类似C函数,但是Block比之C函数,其灵活性体现在 ...

  6. Python中remove，del和pop的区别

    以a=[1,2,3] 为例,似乎使用del, remove, pop一个元素2 之后 a都是为 [1,3], 如下:http://Novell.Me >>> a=[1,2,3] &g ...

  7. SQLite数据库的基本操作

    SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且目前已经在很多嵌入式产 ...

  8. BZOJ 1109: [POI2007]堆积木Klo

    1109: [POI2007]堆积木Klo Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 948  Solved: 341[Submit][Statu ...

  9. gulp用途

    前端构建工具,可以实现文件合并.文件压缩.语法检查.监听文件变化 参看: http://blog.sina.com.cn/s/blog_6592d8070102vmuq.html https://se ...

  10. C# winform窗体设计-数据库连接

    本篇文章内容主要是小编上课所学的总结 最近小编在学习C#中的数据库管理方面,主要学习到数据库的增删改查,查询学生平均分,最低分,最高分等操作 [本篇文章中小编主要讲解数据库的连接] 在C#中使用数据库 ...