方法一：利用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. Linux系统启动排错实验集合

    Centos6系统启动流程 1. post  加电自检  检查硬件环境 2. 选择一个硬件类型引导启动           mbr 446字节   grub  stage1 3. 加载boot分区的文 ...

  2. 16个PHP设计模式详解

    说明:该教程全部截选自实验楼教程[16个PHP设计模式详解]:主要介绍16个常用的设计模式的基础概念和技术要点,通过UML类图帮助理解设计模式中各个类之间的关联关系,针对每种设计模式都使用PHP完成了 ...

  3. ERROR [main] zookeeper.RecoverableZooKeeper: ZooKeeper create failed after 4 attempts

    ERROR [main] zookeeper.RecoverableZooKeeper: ZooKeeper create failed after 4 attempts ERROR [main] m ...

  4. GCC 用户态&内核态 Makefile

    转了一圈,今天再次回到C 网上一篇博文,个人感觉良心作品,故而拿来重新实现一遍,原作者原文有问题,我这里把他打通了 一．GCC Makefile //hello.c #include <stdi ...

  5. 已解决(转)关于android - apk(解析错误)解析程序包时出现问题

    如果开发的应用用户较多,那么必须保证应用在多个版本不同的设备上能够正确的运行.这就要求对各个版本比较熟悉,知道在什么版本中加入了什么新的功能或特性.但是Android的版本太多了,是个令人头疼的问题. ...

  6. 42.PHP--电商网站的询价插件

    windows下使用php自带的mail函数实现简单的邮件发送实例(QQ亲试成功) 功能实现:通过中间邮箱把客户的需求和产品信息全部发送到公司的业务员邮箱 环境及工具: win7_64bit phps ...

  7. sqli-labs(十七)

    第五十四关: 这关大概意思就是尝试次数不能多于十次,必须十次之类查询处特点的key. 第一次:输入单引号报错 第二次:输入双引号不报错 说明后台是单引号进行的拼凑 第三步:这里应该是判断列,用orde ...

  8. 003-SqlHelper.cs/Web.config

    <?xml version="1.0" encoding="utf-8"?> <!-- 有关如何配置 ASP.NET 应用程序的详细信息,请访 ...

  9. 执行字符串或注释代码段的方法（eval、exec、execfile）

    eval:计算字符串中的表达式exec:执行字符串中的语句execfile:用来执行一个文件 需注意的是,exec是一个语句,而eval()和execfile()则是内建built-in函数. 1 2 ...

  10. 记前些日子archlinux更新后无法调节声音的解决方法

    桌面环境用的是xfce4. 自从某次更新过后,panel中调节声音的插件变成了 xfce4-pulseaudio-plugin.然后就发现在panel中无法调节声音了. 在这个插件的属性中发现了一项设 ...