html 点击复制功能

因为项目里要点击复制视频的URL，在这里记录下，方便以后复用。

在网上查了下资料，主要有 js+flash 的实现和 html5 的实现，前者使用 flash 对浏览器的兼容性较好，后者支持已经支持 HTML5 的浏览器。

最近又发现一个不用 flash 和框架的插件 clipboard.js（github上的star挺多的，有空再看下） clipboard.js官网

HTML5 实现方式

示例是复制 span 标签中 value 属性中的值。

css

/* 复制成功后提示样式*/.copy-tips {    position: fixed;    z-index: 999;    bottom: 50%;    left: 50%;    margin: 0 0 -20px -80px;    background-color: rgba(0, 0, 0, 0.2);    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);    padding: 6px;}.copy-tips-wrap {    padding: 10px 20px;    text-align: center;    border: 1px solid #F4D9A6;    background-color: #FFFDEE;    font-size: 14px;}

html

jsp页面中的内容

<span value="${item.videoUrl}" class="copyVideo" style="color:#10b7ff;cursor:pointer;" onclick="copyVideoUrl(event)">复制URL</span>


js

function copyVideoUrl(event){    var value = $(event.target).closest("span").attr('value');    var success;    var $temp = $("<input>");    $("body").append($temp);    $temp.val(value).select();    try{       success = document.execCommand("copy");    }catch (e){        succeed = false;    }    if(success){        var $copySuccess = $("<div class='copy-tips'><div class='copy-tips-wrap'>复制成功</div></div>");        $("body").find(".copy-tips").remove().end().append($copySuccess);        $(".copy-tips").fadeOut(3000);    }    $temp.remove();}

点击按钮复制示例见
Click button copy to clipboard using jQuery

js + flash 实现方式

有独立的 js 库 Zero Clipboard 可以实现复制功能，这里使用封装后的 jQuery ZeroClipboard，jQuery-zclip 插件需要 Flash 的支持，代码要放到服务器上运行才有效果，本地是不起作用的。jquery-zclip插件

HTML、CSS和上面一样，这里只写js。注意：代码中要引入 jquery.zclip.js ，jquery.min.js, js代码中还要指明引入 ZeroClipboard.swf 文件的位置。

js

$(document).ready(function() {        $(".copyVideo").zclip({            path: "${context}/js/ZeroClipboard.swf",            copy: function () {                return $(this).attr("value");            },            beforeCopy: function () {/* 按住鼠标时的操作 */                $(this).css("color", "orange");            },            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(2000);            }        });    });

参考资料

js实现复制到剪贴板功能，兼容所有浏览器