网站内容复制(一个H5分享：不是你不能，而是你对自己的要求太低)

　　网站内容复制(一个H5分享：不是你不能，而是你对自己的要求太低)

　　前两天听了一个H5分享。会上有一句话。我印象很深：不是你做不到，而是你对自己太低了。用很简单的一句话，相信很多事情对每个人来说都不是不可能的。对自己来说真的太低了。如果你对自己要求更高，那么你可能会取得更大的进步。从小到大，很多朋友也听过很多激励自己上进的话语，但并不是每个人都能坚持下去。其实这和自己的性格和周围的环境有很大关系。他们只能谈论寻找更多方法来做到这一点。，条件鼓励自己，不断提高对自己的要求，才有机会获得多一点的成绩。

　　今年下半年，我计划在群里建设一个名为“移动开发指南”的网站。在构建网站框架的过程中，需要实现一个功能，将文本复制到剪贴板。我相信这个功能很常见，但是不经常写的JS代码对我来说是一个很大的挑战。回想之前做的一个网站，使用window.clipboardData实现复制到剪贴板功能，目前只支持IE和FF浏览器。当时在百度上找了几个解决办法。看不下去我就放弃了。后来我在代码中做了一个判断。如果不支持该属性，我会直接提示：此功能不支持浏览器，请手动复制文本框内容。现在想来，真是偷懒了，呵呵，有人中*敏*感*词*了吗？

alert("此功能不支持该浏览器,请手工复制文本框中内容");

　　其实网上并没有详细说明js实现复制到剪贴板的功能。许多 文章 都相同一千次。对于需要使用复制到剪贴板功能的童鞋来说，是相当痛苦的。我今天就给大家。带上这个分享，由于能力有限，还请大家多多指教~

　　相信很多用wordpress建网站的同学都知道它用的是jQuery。大家对jQuery并不陌生。使用起来非常简单。遗憾的是，jQuery 本身并没有实现复制到剪贴板的功能，但也许它的 API 会有这个功能。. 这次我使用 wordpress 构建了该站点。我花了一些时间搜索 jQuery 副本到剪贴板 API。真的有：jQuery ZeroClipboard，所以我用它来简单地在wordpress中实现复制到剪贴板的功能。但是，jQuery ZeroClipboard 竟然有一个叫做 Zero Clipboard 的父亲。

　　零剪贴板作为一个独立的js库，使用Flash进行复制，需要两个文件：ZeroClipboard.js和ZeroClipboard.swf。网上有两个版本。实现原理是使用flash进行复制。不知道原创是谁的，还是家中的两兄弟。我们不在乎这个。只要我们尊重版权，就是问心无愧，今天给大家介绍的版本比较简单。

　　先看下图是使用零剪贴板后生成的flash对象。兼容flash10及以下，兼容所有浏览器：

　　零剪贴板官方地址：，github地址：

　　要使用它，你需要搭建一个服务器环境。有的同学可能不知道怎么搭建服务器环境。搭建服务器环境的方法有很多，比如xp或者win7自带的IIS。也可以使用xampp、appserv、APMServ等集成包，直接安装即可。设置很简单，这里就不介绍了~

　　现在我们首先使用独立的js库零剪贴板来简单的实现复制到剪贴板的功能。演示如下：

Zero Clipboard Test

复制到剪贴板

输入需要复制的内容

// 定义一个新的复制对象

var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {

moviePath: "ZeroClipboard.swf"

} );

// 复制内容到剪贴板成功后的操作

clip.on( 'complete', function(client, args) {

alert("复制成功，复制内容为："+ args.text);

} );

　　Demo下载（温馨提示：下载代码的同学，浏览demo时记得使用服务器环境，否则看不到效果~）

　　零剪贴板的功能已经在上面的代码注释中介绍过了，如果你需要了解更多的功能，请到

　　接下来介绍jQuery ZeroClipboard

　　jQuery ZeroClipboard 是在 ZeroClipboard 基础上的改进，简称 zClip。作为 jQuery 的 API，jQuery ZeroClipboard 的操作也非常简单。官方地址：

　　使用前需要引用两个js文件：jquery.js和jquery.zclip.js

　　现在我们使用jquery.zclip.js简单实现copy to clipboard功能demo如下：

ZeroClipboard Test

.line{margin-bottom:20px;}

/* 复制提示 */

.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;}

demo1 点击复制当前文本

点击复制我

demo2 点击复制表单中的文本

点击复制单中的文本

$(document).ready(function(){

/* 定义所有class为copy标签，点击后可复制被点击对象的文本 */

$(".copy").zclip({

path: "ZeroClipboard.swf",

copy: function(){

return $(this).text();

},

beforeCopy:function(){/* 按住鼠标时的操作 */

$(this).css("color","orange");

},

afterCopy:function(){/* 复制成功后的操作 */

var $copysuc = $("☺ 复制成功");

$("body").find(".copy-tips").remove().end().append($copysuc);

$(".copy-tips").fadeOut(3000);

}

});

/* 定义所有class为copy-input标签，点击后可复制class为input的文本 */

$(".copy-input").zclip({

path: "ZeroClipboard.swf",

copy: function(){

return $(this).parent().find(".input").val();

},

afterCopy:function(){/* 复制成功后的操作 */

var $copysuc = $("☺ 复制成功");

$("body").find(".copy-tips").remove().end().append($copysuc);

$(".copy-tips").fadeOut(3000);

}

});

});

　　Demo下载（温馨提示：下载代码的同学，浏览demo时记得使用服务器环境，否则看不到效果~）

　　上面的代码结合了jQuery的操作节点的功能，充分发挥了jquery.zclip.js的作用，比如复制前后的操作，节点的动态插入。也可以看出jquery.zclip.js的强大使用起来非常简单。需要了解更多jquery.zclip.js的功能请到

　　从以上独立的js库ZeroClipboard.js和jquery.zclip.js都使用flash来实现复制到剪贴板的功能。可以看出，使用 ZeroClipboard.js 带来的功能相对较少，但它是一个独立的库。文件比较小，使用jquery.zclip.js之后的功能更加丰富，但是对于没有使用jQuery框架的网站来说，使用jquery.zclip.js就是浪费宽带了。使用哪种复制方式取决于产品的具体定位~

　　以上就是小编给大家介绍的JS实现。将内容复制到剪贴板的功能兼容所有浏览器（推荐）。我希望它会对你有所帮助。如果您有任何问题，请给我留言。小编会及时回复您。. 非常感谢大家对脸圈教程网站的支持！