方法一：利用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. 自动化工具之二：win32gui

    自动化工具win32gui 一.下载安装win32gui 二.Win32gui的使用 1.查找窗体句柄 我们知道的所有空间其实就是窗体,所有的窗口都有一个独立的句柄,要操作任意一个窗体,你都需要找到这 ...

  2. os.path.join路径拼接

    #import os print("0:", os.path.join('/aaa', 'bbb', 'ccc.txt')) #0: /aaa\bbb\ccc.txt 多数这种用法 ...

  3. 字符串类型 str-->转义符-->字符串格式化-->占位符-->综合案例

    # ###字符串类型 str """ 用引号起来的就是字符串 三种引号:单引号 双引号 三引号 """ """ ...

  4. ie6-ie8支持CSS3选择器的解决办法

    引入nwmatcher.js和selectivizr.js <!--[if lt IE 10]> <script src="html5shiv.js">&l ...

  5. [Guitar self-learning] 基本乐理知识1. 度，升降记号#/b

    度:是音程上面的单位, 指每两个音程(音名)之前的音距.(就像我们说身高时的cm一样, 用来表明当时的音高.) 升记号:#   , 表明在当前的音高下, 升半个音高. 如 #3  ==  4 降记号: ...

  6. iOS 点击返回键崩溃的未解之谜

    1. iOS8出现. 2.点击进去下一层View,然后返回,再返回上一级的视图的时候奔溃. 3.只有点击进去一下层View的时候才出现. 4. 报错的是给一个未知对象发送这个消息 gestureRec ...

  7. redhat vim编辑器永久添加行号及搜索

    设置行号: 跳转到home $ cd ~ 编辑.vimrc,没有的话自动创建 $ vim .vimrc 第一行加入: set nu :wq 保存退出,即可 如果想取消设置,同理删除set nu即可 v ...

  8. cocos2d JS 在 JavaScript 中，怎样把一个对象转化成 JSON 字符串？

    为什么今天要做这样子的操作,原因很简单,因为cocos JS 的本地缓存储存不了对象,所以当我通过本地缓存的 key和value来取值的时候就取不出来来,json的消息数据是一个对象来的,然而在做牌局 ...

  9. html网页什么样的字体最好看，css设置各种中文字体样式代码

    css代码如下:{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,Mi ...

  10. POJ 2155 Matrix(二维BIT)

    Matrix [题目链接]Matrix [题目类型]二维BIT &题解: bit只能单点更新,恰好,这题可以想一下就可以用单点更新解决了. 只不过最后我交上去居然T了,想了10多分钟,试了一下 ...