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. d3-画雷达图-圆形弧线

    本文转载 终极效果 源码 index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Co ...

  2. 怎么给我的Office文档加密

    很多的用户朋友都可以熟练的使用office中的Word.Excel和PowerPoint文档,但大家对Office文档加密方式了解的并不多.Advanced Office Password Recov ...

  3. NSTimer内存泄漏导致控制器不调用dealloc

    创建定时器会在一定的间隔后执行某些操作,一般大家会这样创建定时器,这样创建的定时,self对定时器有个引用,定时器对self也有个引用,造成了循环引用,最终造成了内存泄漏,如果定时器在做下载的操作就会 ...

  4. SQL Server 自增字段重置

    --- 删除原表数据,并重置自增列 truncate table tablename --truncate方式也可以重置自增字段 --重置表的自增字段,保留数据 DBCC CHECKIDENT (ta ...

  5. bzoj4402: Claris的剑

    首先,对于本质相同的构造,我们只计算字典序最小的序列 假设序列中最大的元素为top 我们很容易发现这样的序列一定是1,2,..,1,2,3,2,3,...,2,3,4,3,4.........,top ...

  6. Linux下的删除命令

    Linux:rm Windows:del rm parameter: -f, --force    忽略不存在的文件,从不给出提示.-i, --interactive 进行交互式删除-r, -R, - ...

  7. Jenkins邮件配置，实现邮件发送策略（可实现每个Job对应不同的发送邮箱）

    前言: 首先,要有一个用来发送的邮箱,首选网易!参考:http://www.cnblogs.com/EasonJim/p/6051636.html,这里我注册了网易的免费企业邮箱. 并且我新建没多个邮 ...

  8. Linux Dynamic Shared Library && LD Linker

    目录 . 动态链接的意义 . 地址无关代码: PIC . 延迟版定(PLT Procedure Linkage Table) . 动态链接相关结构 . 动态链接的步骤和实现 . Linux动态链接器实 ...

  9. webbench详解

    安装 mkdir -p /usr/local/man/man1 yum install ctags -y tar zxvf webbench-1.5.tar.gzcd webbench-1.5make ...

  10. C#的委托和事件（delegate）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Dele ...