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

最新文章

热门文章