ZeroClipboard实现多个浏览器兼容的复制文本到剪贴板的功能

http://my.oschina.net/xshuai/blog/411399





ZeroClipboard实现多个浏览器兼容的复制文本到剪贴板的功能

本人在项目中使用的js版本。为了方便大家下载。直接粘贴代码给大家看。版本是1.2.0

?
在开发使用该插件中。由于没仔细。导致报错

TypeError: document.body is null_js报错解决办法

遇到这样的错误。解决方法就是，把该插件引用的js文件和js代码都写在</body>后面

1.首先引入插件的js代码

?
2.html代码

?
<input type="text" id="demo"
name="demo">

<div class="copy-button-section">

<button id="d_clip_buttons" data-clipboard-target="demo" class="my_clip_button">

复制链接及密码

</button>

</div>

data-clipboard-target红色标注的内容为要复制 指定input的id

3.js调用插件的方法实现功能

?
4.data属性说明

名称	说明
data-clipboard-target	元素ID。查找该元素后，尝试复制元素的 .value 或 .textContent 或 .innerText 的值
data-clipboard-text	默认复制的内容。

同时设置 data-clipboard-target 和 data-clipboard-text 两个属性时，只有在找不到 clipboard-target 的值时才会选用 clipboard-text

即使获取到 clipboard-target 的值为空，也不会选用 clipboard-text

5.一个中文API的网站

http://code.ciaoca.com/javascript/zeroclipboard/