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兼容所有瀏覽器的復制。比較簡單方便。