【javascript】复制到剪贴板功能(支持目前各种浏览器)

时间:2023-03-09 18:25:59
【javascript】复制到剪贴板功能(支持目前各种浏览器)

本demo支持各种浏览器复制,亲测可用(IE8,IE9,IE10,火狐,谷歌)。

本demo中使用了ZeroClipboard(下载地址:https://github.com/zeroclipboard/zeroclipboard)。

本demo 必须在服务器环境下,浏览器直接打开无效。

本demo 需要引入3个文件:jquery.min.js、ZeroClipboard.min.js和ZeroClipboard.swf。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复制到剪切板demo</title>
<script type="text/javascript" src="/webtest/js/jquery.min.js"></script>
<script type="text/javascript" src="/webtest/js/ZeroClipboard.min.js"></script>
</head>
<body>
<input type="button" value="复制当前页面url" class="my_copy" >
</body>
<script type="text/javascript"> $(function() {
var url = window.location.href; try{//支持ZeroClipboard
ZeroClipboard.config( { swfPath: "/webtest/js/ZeroClipboard.swf" } );
$(".my_copy").each(function(i) {
var client = new ZeroClipboard($(this));
client.on("copy", function (event) {
var clipboard = event.clipboardData;
clipboard.setData( "text/plain", url);
alert('当前页面链接已复制到剪贴板!');
// clipboard.setData( "text/html", "<b>Copy me!</b>" );
// clipboard.setData( "application/rtf", "{\\rtf1\\ansi\n{\\b Copy me!}}" );
});
});
}catch(e){
//不支持ZeroClipboard
$(".my_copy").each(function(i) {
$(this).on("click", function(){
var res = window.clipboardData.setData("Text", encodeURI(url));
if(res){
alert('收集链接已复制到剪贴板!');
} }); });
} })
</script>
</html>