谷歌浏览器使用复制的功能

在文本复制的时候，Ie和谷歌是不能同时使用 window.clipboardData，对象的，该功能IE可以使用，但是谷歌是不能使用的，所以要使用下面的插件来进行操作： ZeroClipboard.js和ZeroClipboard.swf这两个包，来进行操作。

如果这连个文件不在同一个目录下，可是在 new ZeroClipboard 对象之后调用，ZeroClipboard.setMoviePath('ZeroClipboard10.swf' );进行设置swf文件所在的目录。

案例的git地址：https://gitee.com/sgqing/google_browser_text_copy.git

<html>
<head>
    <title>Zero Clipboard Test</title>
    <script type="text/javascript" src="ZeroClipboard.js"></script>
    <script language="JavaScript">
        var clip = null;

        // 获取你要复制的内容
        function $(id) {
            return document.getElementById(id);
        }

        function init() {
            //创建对象
            clip = new ZeroClipboard.Client();
            //是否支持复制
            clip.setHandCursor(true);
            // 当鼠标移到要点击的对象上面的时候，就会触发
            clip.addEventListener('mouseOver', function (client) {
                // //     // update the text on mouse over
                clip.setText($('fe_text').value);
            });
            // clip.setText($('fe_text').value);
            // 会监听，当赋值完成之后，就会执行该方法
            clip.addEventListener('complete', function (client, text) {
                //debugstr("Copied text to clipboard: " + text );
                alert("该地址已经复制，你可以使用Ctrl+V 粘贴。");
            });
            // 用于指定当前的flash运行在什么地方，一般是点击的地方
            clip.glue('clip_button');
        }
    </script>
</head>
<!--// 一定要进行数据的初始化，要不然在使用的时候，需要点击两次才可以完成数据的赋值-->
<body onLoad="init()">

<textarea id="fe_text" cols=50 rows=5>复制内容文本1</textarea>
<span id="clip_container"><span id="clip_button"><b> 复制</b></span></span>

<br>
</body>
</html>

特别提醒，在使用的时候，首先需要对上面的方法，进行初始化，要不然需要点击两次才可以完成数据的复制，注意在复制的时候，保证glue方法，不会操作同一个对象，要不然只会操作第一次的数据

谷歌浏览器使用复制的功能

猜你喜欢