方法一：利用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. Nginx的基础配置管理

    Nginx的基本功能 1.静态资源的web服务器 2.http协议反向代理服务器 3.tcp/udp协议的请求转发 安装nginx yum install epel-release yum insta ...

  2. test TSS Work about

     activity01   activity02   FamilyNew   workTest

  3. 如何创建线程第一种继承Thread类

    步骤 1:定义一个类 继承Thread类.2:重写Thread类的run方法.3:直接创建Thread的子类对象创建线程.4:调用start方法开启线程并调用线程的任务run方法执行.-------- ...

  4. 【UML】NO.48.EBook.5.UML.1.008-【UML 大战需求分析】- 组件图（Component Diagram）

    1.0.0 Summary Tittle:[UML]NO.48.EBook.1.UML.1.008-[UML 大战需求分析]- 组件图(Component Diagram) Style:DesignP ...

  5. Mybatis中映射器实现方式总结

    一种是通过XML文件方式(由一个java接口和一个XML文件构成) RoleMapper rm = session.getMapper(RoleMapper.class); List<Role& ...

  6. 虚拟地址IP

    http://blog.csdn.net/whycold/article/details/11898249

  7. JAVA比较两个List集合的方法

    import java.util.ArrayList; import java.util.Arrays; import java.util.Collection; import java.util.H ...

  8. python更新zip文件中文件

    #更新zip文件中某一个文件import os import shutil import tempfile import zipfile from rat_tool.pack import * too ...

  9. javaIO流

    File类(File类的概述和构造方法) A:File类的概述 File更应该叫做一个路径 文件路径或者文件夹路径 路径分为绝对路径和相对路径 绝对路径是一个固定的路径,从盘符开始 相对路径相对于某个 ...

  10. 35.HTML--网页自动跳转 5种方法

    网页自动跳转 5种方法 利用HTML标记(META中的REFRESH属性) 用HTML标记,就是用META的REFRESH标记,举例如下: <meta http-equiv=refresh co ...