方法一：利用ZeroClipboard 详见 ：http://www.jb51.net/article/22403.htm

1先引入

　　　<script type="text/javascript" src="../plugins/ZeroClipboard/ZeroClipboard.js"></script>

2在加载函数里设置

　　ZeroClipboard.setMoviePath( "../plugins/ZeroClipboard/ZeroClipboard.swf" );

3html中有个coypy按钮

　　<button id="copybtn">Copy</button>

4 绑定函数：

$('#copyurlbtn').click(function (e) {

            e.preventDefault();

            var clip = new ZeroClipboard.Client(); // 新建一个对象

            var temp = postUrl;

            clip.setHandCursor( true );

            clip.setText(temp); // 设置要复制的文本。

            // 注册一个 button，参数为 id。点击这个 button 就会复制。

            //这个 button 不一定要求是一个 input 按钮，也可以是其他 DOM 元素。

            clip.glue("copyurlbtn"); // 和上一句位置不可调换

            clip.addEventListener( "mouseUp", function(client) {

                $.messager.alert("Notice","Copy Success");

            });

上面这样做有个最大的问题就是每次进入页面需要点击两次按钮才可以进行复制成功，是因为ZeroClipboard需要再页面初始化的时候加载。

我们可以如下方式实现：

 ZeroClipboard.setMoviePath( "../plugins/ZeroClipboard/ZeroClipboard.swf" );

    var clip = null;

 $(document).ready(function() {

//     copyUrl的实现

        clip = new ZeroClipboard.Client(); // 新建一个对象

        clip.setHandCursor( true );

        clip.setText(‘text for copy’); // 设置要复制的文本。

        // 注册一个 button，参数为 id。点击这个 button 就会复制。

        //这个 button 不一定要求是一个 input 按钮，也可以是其他 DOM 元素。

        clip.glue("copyurlbtn"); // 和上一句位置不可调换

        clip.addEventListener( "complete", function() {

            $.messager.alert("Notice","Copy Success");

        });

}

方法二：

使用 clipboard ，上面copy的方法依赖flash，较为复杂，下面介绍一种纯js copy的实现，详见https://www.cnblogs.com/52fhy/p/5383813.html
<!DOCTYPE html>

<html>

<head>

    <title>copyjs</title>

    <script src="./clipboard.min.js"></script>

</head>

<body>

    <div class="box1">

        <button id="btn" class="js-copy" data-clipboard-text="copyed content">

            Cut to clipboard

        </button>

    </div>

    <div class="box">

        <input id="foo" value="text for copy">

        <!-- Trigger -->

        <button id="btn" data-clipboard-target="#foo">

            <img src="assets/clippy.svg" alt="Copy to clipboard">

        </button>

    </div>

    <script>

        var btn1 = document.getElementById('btn1');

        var clipboard1 = new Clipboard(btn1);//实例化

        //复制成功执行的回调，可选

        clipboard1.on('success', function(e) {

            console.log(e);

        });

        //复制失败执行的回调，可选

        clipboard1.on('error', function(e) {

            console.log(e);

        });

        var btn = document.getElementById('btn');

        var clipboard = new Clipboard(btn);//实例化

        clipboard.on('success', function(e) {

            console.log(e);

        });

        clipboard.on('error', function(e) {

            console.log(e);

        });

    </script>

</body>

</html>

　　

 

js 实现复制粘贴时注意方法中需要两次点击实现的bug的更多相关文章

  1. 百度ueditor 拖文件或world 里面复制粘贴图片到编辑中 上传到第三方问题

    我这边从world 里面复制粘贴图片到编辑器中,它自动给我上传了,但是我是用的第三方的要设置一个token值,我找了很久,也没有找到应该在哪里设置这个上传的参数,如果是点击图片上传,我知道在dialo ...

  2. Eclipse使用Ctrl+C和Ctrl+V复制粘贴时总是卡顿

    Eclipse使用Ctrl+C和Ctrl+V复制粘贴时总是卡顿,解决办法: 更改打开代码超链接按键Ctrl为Alt: Window -> Preferences -> General -& ...

  3. js 实现复制粘贴

    js 实现复制粘贴 <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" ...

  4. JS ----实现复制粘贴功能 (剪切板应用clipboardData)

    注意:ie7,与ie8 对网页有个复制的权限,需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象 提供了对剪贴板的访问. 三个方法 :1.clearData(sDataFor ...

  5. 通过如何通过js实现复制粘贴功能

    在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...

  6. js实现复制粘贴功能

    在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...

  7. js实现复制粘贴

    项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...

  8. Windwos服务器远程桌面不能复制粘贴的解决方法

    今天使用远程桌面连接登陆服务器,发现不能在本地电脑和远程服务器之间复制粘贴文件了,复制粘贴文本也不行. 网上搜了一下,主要有两种情况: 1.复制粘贴功能原本可以用,突然失灵了2.从头到尾都无法使用这个 ...

  9. js 实现复制粘贴文本过滤（保留文字和图片）

    实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...

随机推荐

  1. Kinect2.0点云数据获取

    接上一篇:Kinect2.0获取数据 http://blog.csdn.net/jiaojialulu/article/details/53087988 博主好细心,代码基本上帖过来就可以用,注释掉的 ...

  2. [js]js中回调函数

    //回调函数: 把一个函数当参数传给另个函数 /* function f1() { console.log('f1'); } function f2(f) { f(); console.log(1); ...

  3. [django]梳理drf知识点2

    外键关系的自动维护 原始提交的server数据 { ... "manufacturer": "DELL", "model_name": &q ...

  4. tf.nn.embedding_lookup函数【转载】

    转自:https://www.cnblogs.com/gaofighting/p/9625868.html //里边有两个很好理解的例子. tf.nn.embedding_lookup(params, ...

  5. NgDL:【第二周】NN基础

    1.计算图的导数计算 正向比如说是计算代价函数值,反向就是增大多少a/b/c对J的影响,也就是导数的意义,这里讲的是求导链式法则. 2.向量化 节约大量计算时间 简直是100倍的时间,看来之前实现的那 ...

  6. iNotify.js通知JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。

    https://github.com/jaywcjlove/iNotify     JS 实现浏览器的 title 闪烁.滚动.声音提示.chrome.Firefox.Safari等系统通知. 这是重 ...

  7. python-列表解析、字典解析、集合解析

    列表解析.字典解析.集合解析 列表解析 生成一个列表 nums = [1, 3, 9] list_gen = [num**2 for num in nums if x <= 5] # [1, 9 ...

  8. nvm管理node之后，安装npm包出现的问题

    在学习Node.js连接MySQL时,使用nvm安装node6.10.0,在项目目录下npm install mysql 出问题. 在查询解决方法后,得知是因为配置文件有问题 package.json ...

  9. cocos2d CCNode类（节点属性大全）

    1 CCNode是cocos2d-x中一个很重要的类,CCNode是场景.层.菜单.精灵等的父类.而我们在使用cocos2d-x时,接触最多的就是场景.层.菜单.精灵等.所以有必要先弄懂CCNode类 ...

  10. mybatis--parametertype的参数传递

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC ...