zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Maven插件
    Maven 构建生命周期
    Maven POM
    JMeter录制登录测试
    IntelliJ IDEA官方下载地址
    Eplise快捷键
    Eclipse-maven相关配置
    vs2019添加引用出错:对COM组件的调用返回了错误HRESULT E_FAIL
    Java学习--多线程(1)
    SQL Server查询重复数据
  • 原文地址:https://www.cnblogs.com/laneyfu/p/5962538.html
Copyright © 2011-2022 走看看