美文网首页
使用JS复制内容到剪贴板(copy to clipboard/j

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

作者: 欧悦服务 | 来源:发表于2014-07-21 11:53 被阅读3543次

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

    这次使用的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

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

    相关文章

      网友评论

          本文标题:使用JS复制内容到剪贴板(copy to clipboard/j

          本文链接:https://www.haomeiwen.com/subject/gbystttx.html