方法一：利用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. 【剑指offer】把数组排成最小的数

    一.题目: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 二.思路: ...

  2. react 首页加载loading

    首页加载loading,放在#root里面,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  3. 【4】axios 获取数据

    API:https://www.kancloud.cn/yunye/axios/234845 基于axios进行二次封装 安装axios npm install axios --save 安装成功 [ ...

  4. 网络基础之2——TCP/IP参考模型

    本内容主要来源于<看透Spring MVC源码分析与实践——韩路彪>一书 BS结构网络传输的分解方式有两种: 1.OSI参考模型. 2.TCP/IP参考模型. OSI和TCP/IP分层模型 ...

  5. Editplus 竖选，竖插入技巧

    竖选方法 1,Alt + C, 然后用鼠标拖选 2,按住Alt健,再用鼠标拖选 行首行尾批量添加字符 以及其它常用正则 操作:Ctrl + H, 调出查找窗口,勾选按正则表达式查询 行首批量添加   ...

  6. 2018-2019-1 20189221《Linux内核原理与分析》第五周作业

    2018-2019-1 20189221<Linux内核原理与分析>第五周作业 实验四 实验过程 当用户态进程调用一个系统调用时,cpu切换到内核态并开始执行一个内核函数. 在Linux中 ...

  7. SDWebImage代码赏析

    过NSOperationQueue来控制 为了保护变量,使用大量了sychronized 读的时候使用了dispatch_sync dispatch_sync(sself.barrierQueue, ...

  8. iOS 开发常用链接总结

    知识归纳 1.招聘一个靠谱的程序员 面试题答案 https://github.com/ChenYilong/iOSInterviewQuestions 2.中文 iOS/Mac 开发博客列表 http ...

  9. svn中给个地址，然后把自己建立的项目拖进去

    1.首先checkout 那个地址就会得到一个空的文件夹(里面有.svn文件) 2.把你的项目copy一下,粘贴到你chekout的文件夹里面,所有文件都是?,然后选中全部,点击add,然后在comm ...

  10. cocos游戏开发小白教程网站

    <Quick-Cocos2d-x v3.3小白书系列教程> <Quick-Cocos2d-x初学者游戏教程>