使用JS复制内容到剪贴板(copy to clipboard/javascript)

本来想这样的内容其实真不应急记录了,网上太多了,但是还真要用到的时候才发现,也不都是这么好用。所以还是记录一下。

这次使用的zeroclipboard这个工具来实现,Git上的项目在这:
https://github.com/zeroclipboard/zeroclipboard

1.下载

把Git上的dist目录copy到自己的目录中,其实只需要ZeroClipboard.js就可以了。

2.demo.html

<html> <body> <script src="/js/zc/ZeroClipboard.js"></script> <textarea id="fe_text" cols="50" rows="3">Copy me!</textarea> <button id="copy-button" data-clipboard-target="fe_text" data-clipboard-text="Default clipboard text from attribute" title="Click to copy me.">Copy to Clipboard</button> <script type="text/javascript"> var client = new ZeroClipboard( document.getElementById("copy-button") ); client.on( "ready", function( readyEvent ) {} ); </script> </body> </html>

3.细节

3.1 js是有先后顺序的

要先引用<script src="/js/zc/ZeroClipboard.js"></script>

3.2 控件使用

data-clipboard-target是目标控件,data-clipboard-text是默认内容

3.3初始化

初始化要在控件之后,new ZeroClipboard参数是要使用的控件ID,然后启用client.on

更多使用请参考作者项目。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,845评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,924评论 25 708
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 24,052评论 8 183
  • 因为原文太长超出字数,Lesson 3 就放在另一篇文章里 How to Use Git and GitHub 标...
    赤乐君阅读 5,260评论 1 5
  • 洗完澡,对着镜子擦脸的时候仔仔细细的端详了一下自己,不得不承认,真的变丑了。痘痘布满了下颚,连脑门也不...
    超耳侠阅读 994评论 0 1