js兼容各个浏览器的复制功能

最新推荐文章于 2025-08-09 20:51:19 发布

转载最新推荐文章于 2025-08-09 20:51:19 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/angellating/p/4950653.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery插件zClip实现跨浏览器兼容的文本复制功能的方法。通过结合Flash技术，该方案能确保在不同浏览器中稳定运行。文章提供了具体的HTML模板及JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看似简单的复制功能，用js做起来竟然遇到各种情况。刚开始在网上搜索到复制功能的几种实现方法，但是都不兼容。最后还是用的插件代码如下

html模板

 <tr>
           <td>1</td>
           <td>小明</td>
           <td style="position:relative;">
                  <input style="width:350px; height:28px; border:none;background:none;" id="view_url" name="view_url" value="www.baidu.com" />
           　　　　 <a style="display:block" class="copy-input" href="#">复制链接</a>
            </td>
</tr>
<tr>
           <td>2</td>
           <td>小红</td>
           <td style="position:relative;">
                  <input style="width:350px; height:28px; border:none;background:none;" id="view_url" name="view_url" value="www.baidu.com" />
            　　　　<a style="display:block" class="copy-input" href="#">复制链接</a>
            </td>
</tr>
...

这个是循环遍历出来的数据，对某一个数据进行复制，可以粘贴任意位置。插件下载的有两个。一个是jquery.zclip.js，另一个是ZeroClipboard.swf

$(document).ready(function(){
/* 定义所有class为copy-input标签，点击后可复制class为view_url的文本 */
    $(".copy-input").zclip({
        path: "/Public/js/ZeroClipboard.swf",//swf存放的位置
        copy: function(){
        return $(this).prev('input[name="view_url"]').val();//复制的值
        },
        afterCopy:function(){/* 复制成功后的操作 */
            var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ 复制成功</div></div>");
            $("body").find(".copy-tips").remove().end().append($copysuc);
            $(".copy-tips").fadeOut(3000);//3秒后自动消失
        }
    });
});