你的位置:首页 > Java教程

[Java教程]js兼容各个浏览器的复制功能


看似简单的复制功能,用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秒后自动消失    }  });});

利用flash兼容所有浏览器的复制。比较简单方便。