这里有新鲜出炉的精品教程,程序狗速度看过来!
clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+
这篇文章主要实现了无需 Flash 无需依赖任何 JS 库实现文本复制与剪切,是一款极现代的,不需要 flash,不依赖任何其他 js 库的非常小的插件,叫 clipboard.js,感兴趣的小伙伴们可以参考一下
我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过 JS 依靠 Flash,甚至借助 jQuery 庞大的 js 库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的,不需要 flash,不依赖任何其他 js 库的非常小的插件,它叫 clipboard.js。
运行效果图:
html
首先加载本地 clipboard.js 文件。
- <script src="clipboard.min.js">
- </script>
然后就是在 body 中加上要复制或剪切的文本域内容以及按钮。
- <input id="foo" value="http://www.phperz.com/article/73145.htm">
- <button class="btn" data-clipboard-target="#foo" aria-label="复制成功!">
- 复制
- </button>
这里,我们使用了 HTML5 的 data - 属性,用来定位复制对象目标,它指向了文本域 #foo,说明复制的是#foo 中的 value 内容,aria-label 属性定义了复制成功后的信息,用来提示复制结果信息。
还有个属性 data-clipboard-action,它定义当前操作是复制还是剪切,默认是复制,当 data-clipboard-action="cut",这时,点击按钮将会剪切文本,跟 WORD 操作一样。当然,剪切操作仅适用于 text 和 textarea。
我们也可以不需要 input 和 textarea 等元素内容作为复制对象,我们可以将要复制的内容通过 ata-clipboard-text 属性定义在按钮上,点击按钮就可以复制到 ata-clipboard-text 对应的内容。
- <button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功!">
- 复制
- </button>
Javascript
将以下一句代码加入到前的
- new Clipboard('.btn');
当然我们可以再进一步处理,比如当复制完成后,提示复制成功信息更友好些,只要执行以下代码即可:
- var clipboard = new Clipboard('.btn');
- clipboard.on('success',
- function(e) {
- var msg = e.trigger.getAttribute('aria-label');
- alert(msg);
- e.clearSelection();
- });
来源: http://www.phperz.com/article/17/0716/269180.html