全浏览器兼容的Copy复制到剪贴板js

2011年5月20日 分类: Javascript

我们知道在IE、火狐浏览器中点击某个按钮复制一段文本，有时会有弹出提示或不起作用的时候，今天，我们就来解决这个问题。

原理：借助Flash的力量，将内容复制到剪贴板。

由于本人不会Flash就在网上找到了一个类库，帮我们完成这个操作。Zero Clipboard

先看一下最后实现的效果。

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>New Document </title>
    <script type="text/javascript" src="ZeroClipboard.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            //创建ZeroClipboard对象
            var clip = new ZeroClipboard.Client();
            //设置鼠标停留在复制按钮上是手型
            clip.setHandCursor(true);
            //鼠标按下时，复制到剪贴板。。。ps:很费解，为什么不是click非是mouseOver
            clip.addEventListener('mouseOver', function (client) {
                clip.setText(document.getElementById('inputText').value);
            });
            //设置复制到剪贴板完成时，输出
            clip.addEventListener('complete', function (client, text) {
                alert("复制成功!:\n" + text);
            });
            //设置按钮的Dom对象
            clip.glue('btnCopy');
        }
    </script>
</head>
<body>
    <div id="flash_copy"></div>
    <input type="text" id="inputText" />
    <input type="button" value="复制到剪贴板" id="btnCopy" />
</body>
</html>

具体说明，直接看注释吧。代码下载

原创文章，转载请注明： 转载自.NET开发者

本文链接地址: 全浏览器兼容的Copy复制到剪贴板js

文章的脚注信息由WordPress的wp-posturl插件自动生成

Related posts:

  1. javascript中的prototype属性。
  2. Javascript中的Json序列化和反序列化
标签: ,
发表评论 | Trackback

1条评论 于 “全浏览器兼容的Copy复制到剪贴板js”

  1. leetom
    2011年6月14日21:07
    1

    我觉得弹出安全提示也没啥，用火狐/chrome都习惯了

Leave a Comment