Javascript实现复制功能，兼容所有浏览器问题及注意事项

 

Google source 开放了JavaScript代码: zeroclipboard  , 实现 "复制到剪切板"的功能,并支持所有浏览器.

测试案例: http://www.javbon.com/resources/zeroclipboard/test.html 

参考文档: http://code.google.com/p/zeroclipboard/wiki/Instructions

 

方法介绍:

1) 引入ZeroClipboard.js/ZeroClipboard.swf 2个文件即可.

   2个文件与对应的页面最好是放在同一目录, 如果不是同一目录, 则可能需要修改ZeroClipboard.js里面的 moviePath: 路径值. (js的相对路径没有处理好, 比较狗血)

2) 加入asp.net网页后, 出现Mathon浏览器反而不支持复制功能的情况, 并出现报错.

    解决方法是用try方法捕捉错误后, 用window.clipboardData.setData("Text", "text value")  代替.                          

 

参考代码:

                <script language="JavaScript">
                    var clip = new ZeroClipboard.Client();

                    clip.setText(''); // will be set later on mouseDown 
                    clip.setHandCursor(true);
                    clip.setCSSEffects(true);

                    clip.addEventListener('load', function(client) {
                        // alert( "movie is loaded" ); 
                    });

                    clip.addEventListener('complete', function(client, text) {
                        //alert("Copied text to clipboard: " + text);
                        alert("已复制成功到剪切板." );
                    });

                    clip.addEventListener('mouseOver', function(client) {
                        // alert("mouse over");  
                    });

                    clip.addEventListener('mouseOut', function(client) {
                        // alert("mouse out");  
                    });

                    clip.addEventListener('mouseDown', function(client) {
                        try{
                            // set text to copy here
                            clip.setText(document.getElementById('txtLogiName').value); 
                        }
                        catch (err) {
                            var clipBoardContent = document.getElementById("txtLogiName").value;
                            window.clipboardData.setData("Text", clipBoardContent);                             
                        }
                    
                        // alert("mouse down");  
                    });

                    clip.addEventListener('mouseUp', function(client) {
                        // alert("mouse up");  
                    });

                    clip.glue('d_clip_button'); 
                </script> 

  

感谢新浪博客文章提供参考: http://blog.sina.com.cn/s/blog_842f551e01019qn8.html